/* =========================================================
   FreightFocus Theme (Clean Foundation)
   Contract:
   - Tokens live here
   - Base styles are minimal and safe
   - New UI uses ff-* primitives
   - Page-specific tweaks go in "Islands"
========================================================= */

/* =========================================================
   01) TOKENS
========================================================= */
body.ff-app {
    /* Brand */
    --primary-seed: #1677ff;
    --primary: var(--primary-seed);
    --primary-hover: color-mix(in srgb, var(--primary-seed) 85%, white);
    --primary-active: color-mix(in srgb, var(--primary-seed) 85%, black);
    --on-primary: #ffffff;
    /* Semantic */
    --success: #52c41a;
    --warning: #faad14;
    --error: #ff4d4f;
    --info: var(--primary);
    /* Neutrals */
    --bg: #f3f5f7;
    --surface: #ffffff;
    --surface-2: #f7f8fa;
    --surface-3: #eef2f6; /* subtle panel */
    --text: #1f1f1f;
    --text-muted: #595959;
    --text-disabled: #9ca3af;
    --border: #d0d7de;
    --divider: #e3e7ee;
    /* Navigation surfaces (LIGHT theme) */
    --nav-bg: #ffffff;
    --nav-bg-2: #f5f5f5;
    --nav-border: rgba(0,0,0,0.08);
    --nav-text: rgba(0,0,0,0.88);
    --nav-text-muted: rgba(0,0,0,0.60);
    --nav-icon: rgba(0,0,0,0.85);
    --nav-active: var(--primary);
    --nav-active-text: rgba(0,0,0,0.88);
    /* Primary-tinted surfaces derived from the seed (replaces hard-coded rgba(22,119,255,...) ) */
    --nav-active-bg: color-mix(in srgb, transparent 88%, var(--primary-seed)); /* ≈ 0.12 */
    --nav-active-border: color-mix(in srgb, transparent 65%, var(--primary-seed)); /* ≈ 0.35 */
    --nav-wedge: var(--nav-bg-2); /* Clip-Two triangle/wedge color */
    /* Topbar */
    --topbar-bg: var(--surface);
    --topbar-border: var(--border);
    --topbar-text: var(--text);
    --topbar-text-muted: var(--text-muted);
    --topbar-hover: var(--surface-2);
    /* When a banner image is present, overlay keeps text readable */
    --topbar-overlay-from: rgba(255,255,255,0.78);
    --topbar-overlay-to: rgba(255,255,255,0.92);
    /* Layout */
    --ff-topbar-height: 60px; /* used only for fixed-navbar offset */
    /* Shape / elevation */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 28px;
    --shadow-1: 0 6px 18px rgba(0,0,0,0.08);
    /* Focus ring linked to brand seed (≈ 35% opacity) */
    --focus: color-mix(in srgb, transparent 65%, var(--primary-seed));
    /* Perfect-scrollbar thumb */
    --ps-thumb: rgba(0,0,0,0.18);
    --warning-bg: color-mix(in srgb, transparent 88%, var(--warning));
    --warning-brd: color-mix(in srgb, transparent 55%, var(--warning));
    --success-bg: color-mix(in srgb, transparent 88%, var(--success));
    --success-brd: color-mix(in srgb, transparent 55%, var(--success));
    /* Let browser draw native controls appropriately */
    color-scheme: light dark;
}

    body.ff-app[data-theme="dark"] {
        /* make primary a touch “brighter” in dark mode */
        --primary: color-mix(in srgb, var(--primary-seed) 70%, white);
        --primary-hover: color-mix(in srgb, var(--primary) 85%, white);
        --primary-active: color-mix(in srgb, var(--primary) 85%, black);
        --on-primary: #0b1220;
        --bg: #0f1115;
        --surface: #151821;
        --surface-2: #1b2030;
        --surface-3: #232a3a;
        --text: #f0f0f0;
        --text-muted: #bfbfbf;
        --text-disabled: #6b7280;
        --border: #6b7280;
        --divider: #232a3a;
        /* Navigation surfaces (DARK theme) */
        --nav-bg: #0b0f1a;
        --nav-bg-2: #121a2b;
        --nav-border: rgba(255,255,255,0.10);
        --nav-text: rgba(255,255,255,0.86);
        --nav-text-muted: rgba(255,255,255,0.62);
        --nav-icon: rgba(255,255,255,0.72);
        --nav-active: var(--primary);
        --nav-active-text: #ffffff;
        /* Use --primary here so it follows your "brighter in dark mode" primary */
        --nav-active-bg: color-mix(in srgb, transparent 78%, var(--primary)); /* ≈ 0.22 */
        --nav-active-border: color-mix(in srgb, transparent 45%, var(--primary)); /* ≈ 0.55 */
        --nav-wedge: var(--nav-bg-2);
        /* Topbar */
        --topbar-bg: var(--surface);
        --topbar-border: var(--border);
        --topbar-text: var(--text);
        --topbar-text-muted: var(--text-muted);
        --topbar-hover: var(--surface-2);
        --topbar-overlay-from: rgba(15,17,21,0.55);
        --topbar-overlay-to: rgba(15,17,21,0.75);
        --shadow-1: 0 10px 28px rgba(0,0,0,0.45);
        /* Slightly stronger in dark mode (≈ 45% opacity) */
        --focus: color-mix(in srgb, transparent 55%, var(--primary-seed));
        --warning-bg: color-mix(in srgb, transparent 78%, var(--warning));
        --warning-brd: color-mix(in srgb, transparent 40%, var(--warning));
        --success-bg: color-mix(in srgb, transparent 78%, var(--success));
        --success-brd: color-mix(in srgb, transparent 40%, var(--success));
        --ps-thumb: rgba(255,255,255,0.22);
    }



/* =========================================================
   02) BASE (safe, minimal fights)
========================================================= */
html, body {
    height: 100%;
    margin: 0;
}

/* #app is the direct parent of the footer in your markup */
#app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

    /* This is the big wrapper before the footer in your HTML */
    #app > .ff-shell.ng-scope {
        flex: 1 1 auto;
    }

    /* Footer should be in normal flow (not absolute) */
    #app > footer {
        position: static; /* key change */
        left: auto;
        right: auto;
        bottom: auto;
    }

.main-content > .container {
    padding-bottom: 0;
}

/* Keep your sidebar offsets WITHOUT causing overflow */
@media (min-width: 992px) {
    #app > footer {
        margin-left: 260px;
        width: calc(100% - 260px);
    }

    #app.app-sidebar-closed > footer {
        margin-left: 70px;
        width: calc(100% - 70px);
    }
}
body.ff-app {
    background: var(--bg);
    color: var(--text-muted);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    body.ff-app h1,
    body.ff-app h2,
    body.ff-app h3,
    body.ff-app h4,
    body.ff-app h5 {
        color: var(--text);
    }

    body.ff-app small,
    body.ff-app .text-muted {
        color: var(--text-muted);
    }

    body.ff-app [json-dbl] {
        display: inline-flex;
        align-items: center;
        min-height: 18px;
        padding: 1px 6px;
        border-radius: var(--radius-sm);
        font-size: 11px;
        font-weight: 650;
        line-height: 1.2;
    }

    body.ff-app:not([data-theme="dark"]) [json-dbl] {
        background: #e9edf2;
        border: 1px solid #d4dbe4;
        color: color-mix(in srgb, var(--text) 62%, var(--surface)) !important;
    }

    body.ff-app[data-theme="dark"] [json-dbl] {
        color: var(--text-muted) !important;
    }

    body.ff-app ::selection {
        background: var(--focus);
        color: var(--text);
    }

    body.ff-app a {
        color: var(--primary);
        text-decoration: none;
    }

        body.ff-app a:hover,
        body.ff-app a:focus {
            color: var(--primary-hover);
        }

    body.ff-app hr {
        border-top: 1px solid var(--divider);
    }

.row {
    margin-right: 0;
    margin-left: 0;
}

.container {
    padding-right: 0;
    padding-left: 0;
    margin-right: 0;
    margin-left: 0;
}
.panel-body{
    padding:0;
}
/* =========================================================
   03) VENDOR BRIDGES (Bootstrap-ish surfaces)
========================================================= */
body.ff-app .label {
    border-radius: var(--radius-sm);
}

    body.ff-app .label-primary {
        background: var(--primary);
        color: var(--on-primary);
    }

/*    body.ff-app .panel,
    body.ff-app .panel-default,
    body.ff-app .panel-white {
        background: var(--surface);
        border-color: var(--border);
        color: var(--text);
    }*/

    body.ff-app .panel-heading {
        background: var(--surface-2);
        border-bottom-color: var(--border);
        color: var(--text);
        padding: 0;
    }

    body.ff-app .panel-footer {
        background: var(--surface-2);
        border-top-color: var(--border);
    }

    body.ff-app .modal-content {
        background: var(--surface);
        border-color: var(--border);
        color: var(--text);
        border-radius: var(--radius-md);
    }

    body.ff-app .modal-header,
    body.ff-app .modal-footer {
        background: var(--surface-2);
        border-color: var(--border);
    }

    body.ff-app .dropdown-menu {
        background: var(--surface);
        border-color: var(--border);
        color: var(--text);
        border-radius: var(--radius-sm);
    }

        body.ff-app .dropdown-menu > li > a,
        body.ff-app .dropdown-menu > li > button {
            color: var(--text);
        }

    /* =========================================================
   04) PRIMITIVES (ff-*)
========================================================= */
    body.ff-app .ff-page {
        background: var(--bg);
    }

    body.ff-app .ff-card,
    body.ff-app .ff-surface {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-1);
    }

    body.ff-app .ff-heading {
        color: var(--text);
    }

    body.ff-app .ff-input {
        background: var(--surface) !important;
        color: var(--text) !important;
        border: 1px solid var(--border) !important;
    }

        body.ff-app .ff-input::placeholder {
            color: var(--text-muted) !important;
        }

        body.ff-app .ff-input:focus {
            border-color: var(--primary) !important;
            box-shadow: 0 0 0 3px var(--focus) !important;
            outline: none !important;
        }

    body.ff-app .ff-btn {
        border-radius: var(--radius-sm);
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
    }

    body.ff-app .ff-btn-primary {
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: var(--on-primary) !important;
    }

        body.ff-app .ff-btn-primary:hover {
            background: var(--primary-hover) !important;
            border-color: var(--primary-hover) !important;
        }

    body.ff-app .ff-btn-outline {
        background: transparent !important;
        border-color: var(--primary) !important;
        color: var(--primary) !important;
    }

        body.ff-app .ff-btn-outline:hover {
            background: var(--focus) !important;
        }

    body.ff-app .ff-seg {
        display: flex;
        gap: 6px;
    }

        body.ff-app .ff-seg .ff-seg-item {
            flex: 1;
            text-align: center;
            border: 1px solid var(--border) !important;
            background: var(--surface-2) !important;
            color: var(--text) !important;
        }

            body.ff-app .ff-seg .ff-seg-item.active {
                background: var(--primary) !important;
                border-color: var(--primary) !important;
                color: var(--on-primary) !important;
            }

    body.ff-app .ff-tile {
        background: var(--surface) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-md) !important;
        box-shadow: none !important;
        transition: transform .12s ease, border-color .12s ease, background .12s ease;
    }

        body.ff-app .ff-tile:hover {
            border-color: var(--primary) !important;
            transform: translateY(-1px);
        }

        body.ff-app .ff-tile:focus-within {
            border-color: var(--primary) !important;
            box-shadow: 0 0 0 3px var(--focus) !important;
        }

    body.ff-app .ff-tile-title {
        color: var(--text) !important;
        font-weight: 600;
    }

    body.ff-app .ff-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    body.ff-app .ff-icon-btn {
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
        cursor: pointer;
    }

        body.ff-app .ff-icon-btn:hover {
            border-color: var(--primary);
            background: var(--surface-2);
        }

        body.ff-app .ff-icon-btn:focus-visible {
            box-shadow: 0 0 0 3px var(--focus);
        }

    body.ff-app :focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--focus);
    }

/* Motion respect */
@media (prefers-reduced-motion: reduce) {
    body.ff-app * {
        transition: none !important;
        animation: none !important;
    }
}


/* =========================================================
   05) ISLANDS (page-specific)
========================================================= */
/* --- Login page island --- */
#login-box.ff-login.ff-page {
    background: var(--bg) !important;
    color: var(--text-muted);
}

#login-box.ff-login #login-container.login-container {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-1) !important;
}

#login-box.ff-login #login-heading {
    color: var(--text) !important;
}

#login-box.ff-login .login-banner {
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
    width: 400px;
}

#login-box.ff-login .login-header {
    position: relative;
}

#login-box.ff-login .login-theme-toggle {
    position: absolute;
    right: 0;
    top: 0;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    #login-box.ff-login .login-theme-toggle:hover {
        background: var(--surface-2) !important;
    }

#login-box.ff-login {
    padding: 16px 8px;
}

#login-box.ff-login #login-container.login-container {
    max-height: calc(100vh - 58px);
    overflow-y: auto;
    width: min(400px, calc(100vw - 32px));
}

#login-box.ff-login .login-header {
    display: grid !important;
    place-items: center;
    box-sizing: border-box;
    height: clamp(172px, 28vh, 230px) !important;
    min-height: 160px !important;
    margin-bottom: 24px;
    padding: 12px 18px;
    overflow: visible;
}

#login-box.ff-login .login-header::before,
#login-box.ff-login .login-banner {
    grid-area: 1 / 1;
}

#login-box.ff-login .login-header::before {
    width: 100% !important;
    height: 100% !important;
}

#login-box.ff-login .login-banner {
    display: block;
    width: auto !important;
    max-width: 100%;
    max-height: 100%;
    height: auto !important;
    object-fit: contain;
    object-position: center center;
    margin: 0 auto;
}

#login-box.ff-login #login-heading {
    margin: 0;
    padding: 10px 0 8px !important;
    font-size: 22px;
    line-height: 1.2;
}

#login-box.ff-login #login-form {
    padding: 0 28px;
}

#login-box.ff-login .login-form-group2 {
    padding: 4px 10px 7px;
}

#login-box.ff-login .login-form-group {
    padding: 4px 0;
}

#login-box.ff-login #login-form .login-form-group {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    column-gap: 8px;
    align-items: center;
}

#login-box.ff-login #login-form .login-form-group > .login-icon {
    width: 30px;
    padding-right: 0;
    text-align: center;
}

#login-box.ff-login #login-form .login-form-group > .login-icon:last-child {
    grid-column: 3;
}

#login-box.ff-login .login-form-control {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
    height: 36px;
    padding: 6px 10px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

#login-box.ff-login #login-form .login-form-control {
    grid-column: 2;
    min-width: 0;
    width: 100% !important;
}

#login-box.ff-login .login-form-control:hover,
#login-box.ff-login .login-form-control:active {
    background: var(--surface) !important;
    border-color: var(--primary) !important;
}

#login-box.ff-login .login-form-control:focus {
    background: var(--surface) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--focus) !important;
    outline: none !important;
}

body.ff-app[data-theme="dark"] #login-box.ff-login .login-form-control {
    border-color: color-mix(in srgb, var(--border) 72%, var(--text)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent) !important;
}

body.ff-app[data-theme="dark"] #login-box.ff-login .login-form-control:hover,
body.ff-app[data-theme="dark"] #login-box.ff-login .login-form-control:focus {
    border-color: var(--primary) !important;
}

body.ff-app[data-theme="dark"] #login-box.ff-login .login-form-control:focus {
    box-shadow: 0 0 0 3px var(--focus) !important;
}

#login-box.ff-login .password-group .login-form-control {
    padding-right: 42px !important;
}

#login-box.ff-login #login-form .password-group .btn-eye {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    right: 42px;
}

#login-box.ff-login .login-btn-container {
    padding-top: 10px;
}

#login-box.ff-login .track-cta {
    padding-bottom: 10px;
}

#login-box.ff-login .track-divider {
    margin: 10px 30px 8px;
}

#login-box.ff-login .track-copy {
    margin-bottom: 6px;
}

#login-box.ff-login .ff-login-meta {
    width: min(400px, calc(100vw - 32px));
}

@media (max-height: 650px) {
    #login-box.ff-login {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    #login-box.ff-login .login-header {
        height: 150px !important;
        min-height: 150px !important;
        margin-bottom: 16px;
        padding-top: 9px;
        padding-bottom: 9px;
    }

    #login-box.ff-login #login-heading {
        padding-top: 7px !important;
        padding-bottom: 5px !important;
        font-size: 20px;
    }

    #login-box.ff-login .login-form-group2 {
        padding-top: 2px;
        padding-bottom: 5px;
    }

    #login-box.ff-login .login-btn-container {
        padding-top: 8px;
    }

    #login-box.ff-login .track-divider {
        margin-top: 8px;
        margin-bottom: 6px;
    }
}

/* --- Dashboard island: dash buttons strip --- */
.ff-dashboard .ff-dash-tiles {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

    .ff-dashboard .ff-dash-tiles a {
        display: block;
        color: inherit !important;
        text-decoration: none !important;
    }

.ff-dashboard .ff-dashboard-chart-status {
    margin-top: 10px;
}

.ff-dashboard .ff-dashboard-chart-status__inner {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    min-height: 38px;
    padding: 6px 10px;
}

.ff-dashboard .ff-dashboard-chart-status__text {
    color: var(--text-muted);
    font-weight: 600;
    margin-right: auto;
}

.ff-dashboard .ff-dashboard-chart-status__text .fa {
    color: var(--primary);
    margin-right: 6px;
}

.ff-dashboard .ff-dashboard-chart-refresh {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    min-height: 28px;
    padding-bottom: 4px;
    padding-top: 4px;
}

/* --- Footer island --- */
body.ff-app .ff-footer {
    align-items: center;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-sizing: border-box;
    color: var(--text-muted);
    line-height: 22px !important;
    min-height: 32px;
    padding: 3px 16px !important;
}

    body.ff-app .ff-footer .text-bold {
        color: var(--text) !important;
    }

body.ff-app #app > footer .footer-inner.ff-footer > .pull-left,
body.ff-app #app > footer .footer-inner.ff-footer > .pull-right {
    line-height: 22px !important;
}

body.ff-app #app > footer .footer-inner.ff-footer .go-top.ff-icon-btn {
    font-size: 14px;
    height: 26px !important;
    line-height: 24px !important;
    min-height: 0;
    width: 30px !important;
}

body.ff-app .ff-footer-version {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* =========================================================
   NAV / SIDEBAR (token-driven)
   Containers: #sidebar.sidebar, .sidebar-container
   Scope: .ff-shell
========================================================= */

/* Paint the actual sidebar containers */
.ff-shell #sidebar.sidebar {
    background: var(--nav-bg) !important;
    border-right: 1px solid var(--nav-border) !important;
}

    .ff-shell #sidebar.sidebar .sidebar-container {
        background: var(--nav-bg) !important;
    }

/* Title */
.ff-shell #sidebar .ff-nav-title,
.ff-shell #sidebar .navbar-title {
    padding: 12px 14px;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nav-text-muted) !important;
    border-bottom: 1px solid var(--nav-border) !important;
    background: transparent !important;
}

/* Menu base */
.ff-shell #sidebar .ff-nav-menu,
.ff-shell #sidebar .main-navigation-menu {
    margin: 0 !important;
    padding: 8px 0 !important;
    list-style: none !important;
    background: transparent !important;
}

    /* Top-level anchors */
    .ff-shell #sidebar .ff-nav-menu > li > a,
    .ff-shell #sidebar .main-navigation-menu > li > a {
        display: block;
        padding: 10px 14px;
        margin: 2px 8px;
        border-radius: var(--radius-sm);
        color: var(--nav-text) !important;
        text-decoration: none !important;
        background: transparent !important;
    }

    /* Clip-Two item layout */
    .ff-shell #sidebar .main-navigation-menu .item-content,
    .ff-shell #sidebar .ff-nav-menu .item-content {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* Icons + arrow */
    .ff-shell #sidebar .main-navigation-menu .item-media i,
    .ff-shell #sidebar .ff-nav-menu .item-media i,
    .ff-shell #sidebar .main-navigation-menu i.ti,
    .ff-shell #sidebar .ff-nav-menu i.ti {
        color: var(--nav-icon) !important;
    }

    .ff-shell #sidebar .main-navigation-menu .icon-arrow,
    .ff-shell #sidebar .ff-nav-menu .icon-arrow {
        color: var(--nav-text-muted) !important;
    }

    /* Text */
    .ff-shell #sidebar .main-navigation-menu .title,
    .ff-shell #sidebar .ff-nav-menu .title,
    .ff-shell #sidebar .main-navigation-menu .item-inner,
    .ff-shell #sidebar .ff-nav-menu .item-inner {
        color: var(--nav-text) !important;
    }

    /* Hover */
    .ff-shell #sidebar .ff-nav-menu > li > a:hover,
    .ff-shell #sidebar .main-navigation-menu > li > a:hover {
        background: var(--nav-bg-2) !important;
    }

    /* Active/open */
    .ff-shell #sidebar .ff-nav-menu > li.active > a,
    .ff-shell #sidebar .ff-nav-menu > li.open > a,
    .ff-shell #sidebar .main-navigation-menu > li.active > a,
    .ff-shell #sidebar .main-navigation-menu > li.open > a {
        background: var(--nav-active-bg) !important;
        border: 1px solid var(--nav-active-border) !important;
    }

    .ff-shell #sidebar .ff-nav-menu > li.active .item-media i,
    .ff-shell #sidebar .ff-nav-menu > li.open .item-media i,
    .ff-shell #sidebar .main-navigation-menu > li.active .item-media i,
    .ff-shell #sidebar .main-navigation-menu > li.open .item-media i {
        color: var(--nav-active) !important;
    }

    /* Submenu container */
    .ff-shell #sidebar .ff-nav-menu > li > .sub-menu,
    .ff-shell #sidebar .main-navigation-menu > li > .sub-menu {
        background: transparent !important;
        padding: 6px 0 10px;
        margin: 0 8px 8px;
        border-left: 1px solid var(--nav-border) !important;
    }

        /* Submenu links */
        .ff-shell #sidebar .ff-nav-menu > li > .sub-menu > li > a,
        .ff-shell #sidebar .main-navigation-menu > li > .sub-menu > li > a {
            display: block;
            padding: 8px 12px;
            margin: 2px 0 2px 10px;
            border-radius: var(--radius-sm);
            color: var(--nav-text-muted) !important;
            text-decoration: none !important;
            background: transparent !important;
        }

            .ff-shell #sidebar .ff-nav-menu > li > .sub-menu > li > a:hover,
            .ff-shell #sidebar .main-navigation-menu > li > .sub-menu > li > a:hover {
                background: var(--nav-bg-2) !important;
                color: var(--nav-text) !important;
            }

        /* Submenu active */
        .ff-shell #sidebar .ff-nav-menu > li > .sub-menu > li.active > a,
        .ff-shell #sidebar .main-navigation-menu > li > .sub-menu > li.active > a,
        .ff-shell #sidebar .main-navigation-menu > li > .sub-menu > li.active-state > a {
            background: var(--nav-active-bg) !important;
            border: 1px solid var(--nav-active-border) !important;
            color: var(--nav-text) !important;
        }

        /* Long submenu scroll */
        .ff-shell #sidebar .ff-nav-menu > li > .sub-menu.sub-menu-scroll,
        .ff-shell #sidebar .main-navigation-menu > li > .sub-menu.sub-menu-scroll {
            max-height: calc(100vh - 180px) !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: touch;
        }

.ff-shell #sidebar .sub-menu.sub-menu-scroll.margin-bottom-30,
.ff-shell #sidebar .sub-menu.sub-menu-scroll.padding-bottom-30 {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Perfect Scrollbar thumbs */
.ff-shell #sidebar .ps__rail-y,
.ff-shell #sidebar .ps-scrollbar-y-rail {
    background: transparent !important;
}

.ff-shell #sidebar .ps__thumb-y,
.ff-shell #sidebar .ps-scrollbar-y {
    background: var(--ps-thumb) !important;
    border-radius: 10px;
}

/* =========================================================
   TOP NAVBAR (token-driven)
   Scope: .ff-shell .ff-topnav
========================================================= */

/* Base header */
.ff-shell .ff-topnav.navbar,
.ff-shell .ff-topnav.navbar.navbar-default {
    background: var(--topbar-bg) !important;
    border-bottom: 1px solid var(--topbar-border) !important;
    color: var(--topbar-text) !important;
    z-index: 1030; /* keep dropdowns above content */
}

/* If legacy fixed-navbar is enabled, ensure content is not hidden underneath */
/*#app.app-navbar-fixed .ff-shell .main-content.notopnavbar {
    padding-top: var(--ff-topbar-height) !important;
}*/

/* Brand + togglers */
.ff-shell .ff-topnav .navbar-header {
    background: transparent !important;
}

.ff-shell .ff-topnav .navbar-brand {
    height: auto;
    padding: 6px 12px;
}

.ff-shell .ff-topnav .btn.btn-navbar,
.ff-shell .ff-topnav .sidebar-toggler,
.ff-shell .ff-topnav .menu-toggler {
    color: var(--topbar-text) !important;
}

    .ff-shell .ff-topnav .btn.btn-navbar:hover,
    .ff-shell .ff-topnav .sidebar-toggler:hover,
    .ff-shell .ff-topnav .menu-toggler:hover {
        background: var(--topbar-hover) !important;
        border-radius: var(--radius-sm);
    }

/* Collapse area with optional banner image */
.ff-shell .ff-topnav .ff-topnav-bg {
    position: relative;
    background-color: var(--topbar-bg) !important;
    background-size: cover !important;
    background-position: center !important;
}

    /* Readability overlay when an image exists */
    .ff-shell .ff-topnav .ff-topnav-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, var(--topbar-overlay-from), var(--topbar-overlay-to));
        pointer-events: none;
    }

    /* Ensure nav content sits above overlay */
    .ff-shell .ff-topnav .ff-topnav-bg > * {
        position: relative;
        z-index: 1;
    }

/* Right nav links */
.ff-shell .ff-topnav .navbar-nav > li > a {
    color: var(--topbar-text) !important;
    background: transparent !important;
}

    .ff-shell .ff-topnav .navbar-nav > li > a:hover,
    .ff-shell .ff-topnav .navbar-nav > li > a:focus {
        background: var(--topbar-hover) !important;
        color: var(--topbar-text) !important;
        border-radius: var(--radius-sm);
    }

    .ff-shell .ff-topnav .navbar-nav > li > a i {
        color: var(--topbar-text) !important;
    }

/* Dropdown open state */
.ff-shell .ff-topnav .navbar-nav > li.dropdown.open > a,
.ff-shell .ff-topnav .navbar-nav > li.dropdown.open > a:hover,
.ff-shell .ff-topnav .navbar-nav > li.dropdown.open > a:focus {
    background: var(--topbar-hover) !important;
    color: var(--topbar-text) !important;
    border-radius: var(--radius-sm);
}

/* Dropdown menus */
.ff-shell .ff-topnav .dropdown-menu {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-1) !important;
    z-index: 1060 !important;
}

    .ff-shell .ff-topnav .dropdown-menu > li > a {
        color: var(--text) !important;
    }

        .ff-shell .ff-topnav .dropdown-menu > li > a:hover,
        .ff-shell .ff-topnav .dropdown-menu > li > a:focus {
            background: var(--surface-2) !important;
            color: var(--text) !important;
        }

/* User dropdown avatar */
.ff-shell .ff-topnav li.current-user > a img {
    border-radius: 999px;
    border: 1px solid var(--border);
}

/* Favourite pages dropdown legacy normalize */
.ff-shell .ff-topnav .favpage-ul,
.ff-shell .ff-topnav .favpage-li,
.ff-shell .ff-topnav .favpage-li-a {
    background: transparent !important;
    color: inherit !important;
}

/* =========================================================
   TOP NAVBAR + TAB BAR (white-on-white fix)
   Put at VERY END (after theme-purple.css)
========================================================= */

/* 1) Make the topbar surface + text always readable */
body.ff-app .ff-shell header.navbar.navbar-default,
body.ff-app .ff-shell .navbar.navbar-default.navbar-static-top,
body.ff-app .ff-shell .navbar-header,
body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg {
    background: var(--topbar-bg) !important;
    color: var(--topbar-text) !important;
    border-bottom: 1px solid var(--topbar-border) !important;
}

    /* Force ALL link/text/icon colors in the topbar */
    body.ff-app .ff-shell .navbar-header a,
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg a,
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .username,
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .text-username,
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .title {
        color: var(--topbar-text) !important;
    }

        body.ff-app .ff-shell .navbar-header a i,
        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg a i {
            color: var(--topbar-text) !important;
        }

        /* Hover/active states */
        body.ff-app .ff-shell .navbar-header a:hover,
        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right > li > a:hover,
        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right > li > a:focus {
            background: var(--topbar-hover) !important;
            color: var(--topbar-text) !important;
            border-radius: var(--radius-sm) !important;
        }

    /* 2) Only show the banner readability overlay when a banner image exists
   (ng-style only adds background-image inline when BannerPath is set) */
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg::before {
        content: none !important; /* default: no overlay */
    }

    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg[style*="background-image"]::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(to bottom, var(--topbar-overlay-from), var(--topbar-overlay-to)) !important;
        pointer-events: none !important;
    }

/*body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg {*/
    /*position: relative !important;*/ /* so ::before can anchor */
/*}*/

    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg > * {
        position: relative !important;
        z-index: 1 !important;
    }

    /* 3) Fix the Favourite Pages dropdown being transparent (white-on-white inside) */
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .favpage-ul.dropdown-menu {
        background: var(--surface) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-md) !important;
        box-shadow: var(--shadow-1) !important;
    }

    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .favpage-ul > li > a {
        color: var(--text) !important;
        background: transparent !important;
    }

        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .favpage-ul > li > a:hover {
            background: var(--surface-2) !important;
            color: var(--text) !important;
        }

/* 4) Tab-bar include host: give it the same topbar surface + readable tab links
   (this targets your wrapper div with ng-include=tab-bar.html) */
body.ff-app .ff-shell div[ng-include*="partials/tab-bar.html"] {
    background: var(--topbar-bg) !important;
    border-bottom: 1px solid var(--topbar-border) !important;
}

    /* Common tab patterns inside tab-bar.html */
    body.ff-app .ff-shell div[ng-include*="partials/tab-bar.html"] .nav-tabs > li > a,
    body.ff-app .ff-shell div[ng-include*="partials/tab-bar.html"] .nav-pills > li > a {
        color: var(--topbar-text) !important;
    }

    body.ff-app .ff-shell div[ng-include*="partials/tab-bar.html"] .nav-tabs > li.active > a,
    body.ff-app .ff-shell div[ng-include*="partials/tab-bar.html"] .nav-pills > li.active > a {
        background: var(--topbar-hover) !important;
        border-color: var(--topbar-border) !important;
        color: var(--topbar-text) !important;
    }


/* Gold star stays gold */
.ff-shell .ff-topnav .fa-star {
    filter: drop-shadow(0 1px 0 rgba(0,0,0,0.15));
}

/* =========================================================
   06) BROWSER QUIRKS (autofill)
========================================================= */

/* Firefox autofill */
body.ff-app input.ff-input:-moz-autofill,
body.ff-app textarea.ff-input:-moz-autofill,
body.ff-app select.ff-input:-moz-autofill,
body.ff-app input.ff-input:-moz-autofill-preview,
body.ff-app textarea.ff-input:-moz-autofill-preview,
body.ff-app select.ff-input:-moz-autofill-preview {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    box-shadow: 0 0 0 1000px var(--surface) inset !important;
    caret-color: var(--text) !important;
}

/* Chrome / Edge / Safari autofill */
body.ff-app input.ff-input:-webkit-autofill,
body.ff-app textarea.ff-input:-webkit-autofill,
body.ff-app select.ff-input:-webkit-autofill {
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text) !important;
    box-shadow: 0 0 0 1000px var(--surface) inset !important;
    transition: background-color 999999s ease-in-out 0s;
}

    body.ff-app input.ff-input:-webkit-autofill:hover,
    body.ff-app input.ff-input:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--text) !important;
        box-shadow: 0 0 0 1000px var(--surface) inset !important;
    }

/* =========================================================
   VENDOR OVERRIDES (token-aware) — fix legacy !important
========================================================= */
body.ff-app h1,
body.ff-app h2,
body.ff-app h3,
body.ff-app h4,
body.ff-app h5 {
    color: var(--text) !important;
}

body.ff-app label {
    color: var(--text) !important;
}

body.ff-app .panel-heading .panel-heading-tabs > li,
body.ff-app .panel-heading .panel-heading-tabs > li > a,
body.ff-app .panel-heading .panel-heading-tabs > li > button {
    color: var(--text) !important;
}

body.ff-app .panel-heading .panel-heading-tabs .values p,
body.ff-app .panel-heading .panel-heading-tabs .text-small {
    color: var(--text-muted) !important;
}

body.ff-app .panel-heading .panel-heading-tabs i {
    color: var(--text) !important;
}

body.ff-app #page-title {
    background: transparent !important;
}

/* =========================================================
   SIDEBAR HARD OVERRIDES (beats theme-blue + styles.css)
   Fixes hover backgrounds + submenu flyout + wedge colors
   This section intentionally lives at the end so it can win.
========================================================= */
body.ff-app #sidebar,
body.ff-app #sidebar .sidebar-container,
body.ff-app #sidebar nav,
body.ff-app #sidebar .navbar-title,
body.ff-app #sidebar .main-navigation-menu {
    background: var(--nav-bg) !important;
}

    body.ff-app #sidebar nav > ul.main-navigation-menu > li,
    body.ff-app #sidebar nav > ul.main-navigation-menu > li > a {
        background: transparent !important;
        color: var(--nav-text) !important;
        text-decoration: none !important;
    }

    body.ff-app #sidebar nav .item-media i,
    body.ff-app #sidebar nav .icon-arrow {
        color: var(--nav-icon) !important;
    }

    /* Hover (kills the theme-blue grey/white hover) */
    body.ff-app #sidebar > div nav > ul.main-navigation-menu > li:hover,
    body.ff-app #sidebar > div nav > ul.main-navigation-menu > li:hover > a,
    body.ff-app #sidebar nav > ul.main-navigation-menu > li:hover,
    body.ff-app #sidebar nav > ul.main-navigation-menu > li:hover > a {
        background: var(--nav-bg-2) !important;
        color: var(--nav-text) !important;
    }

    /* Active / Open */
    body.ff-app #sidebar nav > ul.main-navigation-menu > li.active,
    body.ff-app #sidebar nav > ul.main-navigation-menu > li.active > a,
    body.ff-app #sidebar nav > ul.main-navigation-menu > li.open,
    body.ff-app #sidebar nav > ul.main-navigation-menu > li.open > a {
        background: var(--nav-active-bg) !important;
        border-color: var(--nav-active-border) !important;
    }

        /* Clip-Two triangle/wedge color (this was white before) */
        body.ff-app #sidebar > div nav > ul.main-navigation-menu > li:hover:before,
        body.ff-app #sidebar > div nav > ul.main-navigation-menu > li.active:before,
        body.ff-app #sidebar > div nav > ul.main-navigation-menu > li.open:before,
        body.ff-app #sidebar nav > ul.main-navigation-menu > li:hover:before,
        body.ff-app #sidebar nav > ul.main-navigation-menu > li.active:before,
        body.ff-app #sidebar nav > ul.main-navigation-menu > li.open:before {
            border-left-color: var(--nav-wedge) !important;
        }

    /* Submenu flyout background */
    body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu {
        background: var(--nav-bg) !important;
        border-left: 1px solid var(--nav-border) !important;
    }

        body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li > a {
            background: transparent !important;
            color: var(--nav-text-muted) !important;
            text-decoration: none !important;
        }

        body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li:hover > a,
        body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li.active > a,
        body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li.active-state > a {
            background: var(--nav-bg-2) !important;
            color: var(--nav-text) !important;
        }


/* =========================================================
   ISLAND: Waybill Full (Quick Capture)
========================================================= */
body.ff-app .ff-waybill .ff-page-header {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-1);
    padding: 12px 14px;
    margin-bottom: 12px;
}

body.ff-app .ff-waybill .ff-page-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

body.ff-app .ff-waybill .ff-page-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text) !important;
    font-weight: 700;
    font-size: 22px;
}

body.ff-app .ff-waybill .ff-page-subtitle {
    color: var(--text-muted);
    font-weight: 600;
}

body.ff-app .ff-waybill .ff-fav-btn i {
    font-size: 18px;
}

/* Toolbar “tiles” */
body.ff-app .ff-waybill .ff-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body.ff-app .ff-waybill .ff-action {
    width: 74px;
    height: 54px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    cursor: pointer;
    user-select: none;
}

    /* Default actions hover (but NOT primary/danger, and not when disabled) */
    body.ff-app .ff-waybill .ff-action:not(.ff-action-primary):not(.ff-action-danger):not([disabled]):not(.disabled):hover {
        background: var(--surface-2) !important;
        border-color: var(--primary) !important;
    }
    /* Primary action: keep primary background on hover */
    body.ff-app .ff-waybill .ff-action.ff-action-primary {
        background: var(--primary);
        border-color: var(--primary);
        color: var(--on-primary);
    }

        body.ff-app .ff-waybill .ff-action.ff-action-primary:not([disabled]):not(.disabled):hover {
            background: var(--primary-hover) !important;
            border-color: var(--primary-hover) !important;
            color: var(--on-primary) !important;
        }

        body.ff-app .ff-waybill .ff-action.ff-action-primary:not([disabled]):not(.disabled):active {
            background: var(--primary-active) !important;
            border-color: var(--primary-active) !important;
        }
    /* Ensure FA icons follow the button's text color */
    body.ff-app .ff-waybill .ff-action i,
    body.ff-app .ff-waybill .ff-action .ff-action-label {
        color: currentColor !important;
    }


    body.ff-app .ff-waybill .ff-action i {
        font-size: 20px;
    }

body.ff-app .ff-waybill .ff-action-label {
    font-size: 11px;
    line-height: 1;
    color: var(--text-muted);
}

body.ff-app .ff-waybill .ff-action-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
}

    body.ff-app .ff-waybill .ff-action-primary .ff-action-label {
        color: var(--on-primary);
    }

body.ff-app .ff-waybill .ff-action-danger {
    border-color: rgba(255, 77, 79, 0.55) !important;
}

    body.ff-app .ff-waybill .ff-action-danger:hover {
        border-color: var(--error) !important;
    }

/* Page body */
body.ff-app .ff-waybill .ff-page-body {
    background: transparent;
}

/* Modern fieldset sections (no markup change needed) */
body.ff-app .ff-waybill fieldset {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 14px 10px;
    margin-bottom: 14px;
}

body.ff-app .ff-waybill legend {
    width: auto;
    padding: 0 8px;
    margin-bottom: 10px;
    border: 0;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Inputs */
body.ff-app .ff-waybill .ff-input {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

    body.ff-app .ff-waybill .ff-input:focus {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 3px var(--focus) !important;
    }

body.ff-app[data-theme="dark"] .ff-waybill .ff-additional-details > .row .form-control,
body.ff-app[data-theme="dark"] .ff-waybill .ff-additional-details > .row .ff-input,
body.ff-app[data-theme="dark"] .ff-waybill .ff-additional-details > .row .ui-select-container .btn.form-control.ui-select-toggle,
body.ff-app[data-theme="dark"] .ff-waybill .ff-additional-details > .row .ui-select-container .btn.form-control {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
    color: var(--text) !important;
    opacity: 1 !important;
}

body.ff-app[data-theme="dark"] .ff-waybill .ff-additional-details > .row .form-control:disabled,
body.ff-app[data-theme="dark"] .ff-waybill .ff-additional-details > .row .form-control[disabled],
body.ff-app[data-theme="dark"] .ff-waybill .ff-additional-details > .row .form-control[readonly],
body.ff-app[data-theme="dark"] .ff-waybill .ff-additional-details > .row .ff-input:disabled,
body.ff-app[data-theme="dark"] .ff-waybill .ff-additional-details > .row .ff-input[disabled],
body.ff-app[data-theme="dark"] .ff-waybill .ff-additional-details > .row .ff-input[readonly] {
    color: var(--text-muted) !important;
}

body.ff-app .ff-waybill .ff-additional-details input[ng-model="waybillvm.ClientDetails.QuoteID"],
body.ff-app .ff-waybill .ff-additional-details input[ng-model="waybillvm.ClientDetails.CollectionID"],
body.ff-app .ff-waybill .ff-additional-details input[ng-model="waybillvm.ClientDetails.ManifestNO"] {
    max-width: 9.5rem;
    width: min(100%, 9.5rem) !important;
}

body.ff-app .ff-waybill .ff-additional-details input[ng-model="waybillvm.ClientDetails.InvDate"] {
    max-width: 9rem;
    width: min(100%, 9rem) !important;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-manifest-list .input-group {
    max-width: 15rem;
    width: min(100%, 15rem) !important;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-row,
body.ff-app .ff-waybill .ff-additional-details .ff-additional-linked-row,
body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-pair-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px 0;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-row::before,
body.ff-app .ff-waybill .ff-additional-details .ff-additional-row::after,
body.ff-app .ff-waybill .ff-additional-details .ff-additional-linked-row::before,
body.ff-app .ff-waybill .ff-additional-details .ff-additional-linked-row::after,
body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-pair-row::before,
body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-pair-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-row > [class*="col-"],
body.ff-app .ff-waybill .ff-additional-details .ff-additional-linked-row > [class*="col-"],
body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-pair-row > [class*="col-"] {
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-id-field {
    flex: 0 0 9.5rem;
    max-width: 9.5rem;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-id-action {
    flex: 0 0 34px;
    max-width: 34px;
    margin-right: 8px !important;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-linked-row .ff-additional-id-action {
    margin-right: 0 !important;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-linked-wrap {
    flex: 0 1 auto;
    margin-right: 8px;
    min-width: calc(9.5rem + 34px);
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-manifest-wrap {
    flex-basis: calc(9.5rem + 34px + 9rem + 8px);
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-date-field {
    flex: 0 0 9rem;
    margin-left: 8px;
    max-width: 9rem;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-pair {
    flex: 0 1 310px;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-wide {
    flex: 1 1 520px;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-field {
    flex: 1 1 145px;
    min-width: 135px;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-pair-row > [class*="col-"]:not(.ff-additional-meta-field) {
    flex: 1 1 220px;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-id-field label,
body.ff-app .ff-waybill .ff-additional-details .ff-additional-date-field label,
body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-field label {
    white-space: nowrap;
}

body.ff-app .ff-waybill .ff-wildcard-toggle {
    cursor: pointer;
    color: var(--text-muted);
    font-weight: 700;
}

body.ff-app .ff-waybill .ff-wildcard-toggle.is-active,
body.ff-app .ff-waybill .ff-wildcard-mode-label {
    color: var(--error) !important;
}

body.ff-app .ff-waybill .ff-wildcard-mode-label {
    display: inline-block;
    margin-left: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

/* ui-select Bootstrap theme bridge */
body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap > .ui-select-match > .btn {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

    body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap > .ui-select-match > .btn:hover {
        background: var(--surface-2) !important;
    }

body.ff-app .ff-waybill .ui-select-bootstrap .ui-select-search {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

body.ff-app .ff-waybill .ui-select-bootstrap .ui-select-choices-row > a {
    color: var(--text) !important;
}

    body.ff-app .ff-waybill .ui-select-bootstrap .ui-select-choices-row > a:hover {
        background: var(--surface-2) !important;
    }



/* Badge wrap fix (replaces inline <style>) */
body.ff-app .ff-waybill .badge-warning {
    white-space: normal;
    display: inline-block;
    word-wrap: break-word;
    max-width: 100%;
}

/* Remove forced white containers */
body.ff-app .ff-waybill .container-fullw.bg-white {
    background: transparent !important;
}

body.ff-app .ff-card-pad {
    padding: 14px;
}





/* =========================================================
   ISLAND BRIDGE: Waybill Full
   - ng-dropdown-multiselect (Surcharges)
   - DevExtreme dx-select-box dropdown button (Driver Name)
   Put this at the END of the file.
========================================================= */

/* === ng-dropdown-multiselect (the "Select" button) ====================== */
body.ff-app .ff-waybill
.multiselect-parent.btn-group.dropdown-multiselect > button.dropdown-toggle.btn {
    width: 100% !important;
    min-height: 34px;
    padding: 6px 10px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

    body.ff-app .ff-waybill
    .multiselect-parent.btn-group.dropdown-multiselect > button.dropdown-toggle.btn:hover {
        background: var(--surface-2) !important;
        border-color: var(--primary-hover) !important;
    }

    body.ff-app .ff-waybill
    .multiselect-parent.btn-group.dropdown-multiselect > button.dropdown-toggle.btn:focus,
    body.ff-app .ff-waybill
    .multiselect-parent.btn-group.dropdown-multiselect.open > button.dropdown-toggle.btn {
        background: var(--surface) !important;
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 3px var(--focus) !important;
    }

/* caret color */
body.ff-app .ff-waybill
.multiselect-parent.btn-group.dropdown-multiselect > button .caret {
    color: var(--text-muted) !important;
    border-top-color: currentColor !important;
}

/* dropdown menu */
body.ff-app .ff-waybill
.multiselect-parent.btn-group.dropdown-multiselect > ul.dropdown-menu {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-1) !important;
}

    body.ff-app .ff-waybill
    .multiselect-parent.btn-group.dropdown-multiselect > ul.dropdown-menu > li > a,
    body.ff-app .ff-waybill
    .multiselect-parent.btn-group.dropdown-multiselect > ul.dropdown-menu label {
        color: var(--text) !important;
    }

        body.ff-app .ff-waybill
        .multiselect-parent.btn-group.dropdown-multiselect > ul.dropdown-menu > li > a:hover {
            background: var(--surface-2) !important;
        }




/* FIX: ng-dropdown-multiselect "Surcharges" button still white
   (button is inside: .multiselect-parent > div > button)
   Put at END of file.
*/
body.ff-app .ff-waybill [ng-dropdown-multiselect] .multiselect-parent.btn-group.dropdown-multiselect,
body.ff-app .ff-waybill [ng-dropdown-multiselect] .multiselect-parent.btn-group.dropdown-multiselect > div {
    background: transparent !important;
}

    /* Target the real button (descendant, not direct child) */
    body.ff-app .ff-waybill [ng-dropdown-multiselect]
    .multiselect-parent.btn-group.dropdown-multiselect
    button.dropdown-toggle.btn.btn-default {
        width: 100% !important;
        min-height: 34px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background-color: var(--surface) !important; /* key */
        background-image: none !important; /* kills bootstrap gradients */
        background: var(--surface) !important; /* belt + suspenders */

        border: 1px solid var(--border) !important;
        border-radius: var(--radius-sm) !important;
        color: var(--text) !important;
        box-shadow: none !important;
    }

        body.ff-app .ff-waybill [ng-dropdown-multiselect]
        .multiselect-parent.btn-group.dropdown-multiselect
        button.dropdown-toggle.btn.btn-default:hover {
            background-color: var(--surface-2) !important;
            background: var(--surface-2) !important;
            border-color: var(--primary-hover) !important;
        }

        body.ff-app .ff-waybill [ng-dropdown-multiselect]
        .multiselect-parent.btn-group.dropdown-multiselect.open
        button.dropdown-toggle.btn.btn-default,
        body.ff-app .ff-waybill [ng-dropdown-multiselect]
        .multiselect-parent.btn-group.dropdown-multiselect
        button.dropdown-toggle.btn.btn-default:focus {
            background-color: var(--surface) !important;
            background: var(--surface) !important;
            border-color: var(--primary) !important;
            box-shadow: 0 0 0 3px var(--focus) !important;
        }

    /* caret */
    body.ff-app .ff-waybill [ng-dropdown-multiselect]
    .multiselect-parent.btn-group.dropdown-multiselect
    button.dropdown-toggle .caret {
        color: var(--text-muted) !important;
        border-top-color: currentColor !important;
    }


/* =========================================
   UI-SELECT: improve dropdown readability
   (choices rows + highlight + active state)
   Put at END of file
========================================= */

/* Choices container */
body.ff-app .ui-select-bootstrap .ui-select-choices {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
}

/* Force readable text inside each row (your example uses .ui-select-choices-row-inner + div) */
body.ff-app .ui-select-bootstrap .ui-select-choices-row-inner,
body.ff-app .ui-select-bootstrap .ui-select-choices-row-inner * {
    color: var(--text) !important; /* key contrast bump */
}

/* Hover + active row background (covers both "row div" and the <a> when present) */
body.ff-app .ui-select-bootstrap .ui-select-choices-row:hover,
body.ff-app .ui-select-bootstrap .ui-select-choices-row.active,
body.ff-app .ui-select-bootstrap .ui-select-choices-row:hover > a,
body.ff-app .ui-select-bootstrap .ui-select-choices-row.active > a {
    background: var(--surface-2) !important;
}

    /* Active row text stays bright */
    body.ff-app .ui-select-bootstrap .ui-select-choices-row.active .ui-select-choices-row-inner,
    body.ff-app .ui-select-bootstrap .ui-select-choices-row.active .ui-select-choices-row-inner * {
        color: var(--text) !important;
    }

/* Disabled rows */
body.ff-app .ui-select-bootstrap .ui-select-choices-row.disabled .ui-select-choices-row-inner,
body.ff-app .ui-select-bootstrap .ui-select-choices-row.disabled .ui-select-choices-row-inner * {
    color: var(--text-disabled) !important;
}

/* Search highlight inside results (usually <span class="ui-select-highlight">) */
body.ff-app .ui-select-bootstrap .ui-select-highlight {
    color: var(--primary) !important;
    font-weight: 700 !important;
    background: transparent !important;
}


/* =========================================
   UI-SELECT: fix white-on-white on hover
   Put at END of file
========================================= */

/* Ensure the dropdown itself isn't inheriting a light hover theme */
body.ff-app .ui-select-bootstrap .ui-select-choices,
body.ff-app .ui-select-bootstrap .ui-select-choices-content {
    background: var(--surface) !important;
}

/* Hover row (covers both the row div and the <a> when present) */
body.ff-app .ui-select-bootstrap .ui-select-choices-row:hover,
body.ff-app .ui-select-bootstrap .ui-select-choices-row:hover > a,
body.ff-app .ui-select-bootstrap .ui-select-choices-row:hover .ui-select-choices-row-inner,
body.ff-app .ui-select-bootstrap .ui-select-choices-row:hover .ui-select-choices-row-inner * {
    background: var(--surface-2) !important;
    color: var(--text) !important;
}

/* Active (keyboard / selected highlight) */
body.ff-app .ui-select-bootstrap .ui-select-choices-row.active,
body.ff-app .ui-select-bootstrap .ui-select-choices-row.active > a,
body.ff-app .ui-select-bootstrap .ui-select-choices-row.active .ui-select-choices-row-inner,
body.ff-app .ui-select-bootstrap .ui-select-choices-row.active .ui-select-choices-row-inner * {
    background: var(--nav-active-bg) !important;
    color: var(--text) !important; /* or var(--nav-active-text) if you prefer */
}

/* If some stylesheet specifically targets a:hover */
body.ff-app .ui-select-bootstrap .ui-select-choices-row > a:hover,
body.ff-app .ui-select-bootstrap .ui-select-choices-row > a:focus {
    background: var(--surface-2) !important;
    color: var(--text) !important;
}

/* =========================================================
   UI-SELECT: kill stray white background rectangle
   (wrapper layers + empty no-choice div + focus class)
   Put at END of file
========================================================= */

body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap,
body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap .ui-select-match,
body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap .ui-select-match.ng-scope,
body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap .ui-select-match.btn-default-focus {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

    /* The real “control” surface is the toggle element (your span.btn.form-control.ui-select-toggle) */
    body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap .ui-select-toggle.btn,
    body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap .ui-select-toggle.form-control {
        background: var(--surface) !important;
        background-image: none !important; /* kills bootstrap gradients */
        color: var(--text) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-sm) !important;
    }

    /* Some themes add pseudo backgrounds to toggles */
    body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap .ui-select-toggle::before,
    body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap .ui-select-toggle::after {
        background: transparent !important;
    }

    /* The “no choice” element can paint a small block even when empty */
    body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap .ui-select-no-choice {
        background: transparent !important;
        color: var(--text-muted) !important;
        padding: 6px 10px !important;
        margin: 0 !important;
    }

        body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap .ui-select-no-choice:empty {
            display: none !important; /* prevents the empty white rectangle */
        }

    /* Just in case the caret/clear link is getting a background */
    body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap i.caret,
    body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap a.btn-link {
        background: transparent !important;
    }


/* =========================================================
   VENDOR ADAPTERS (opt-in via .ff-control + vendor class)
   Put at END of file.
========================================================= */

/* ---------- Shared control surface (optional) ---------- */
body.ff-app .ff-control {
    --ff-ctrl-bg: var(--surface);
    --ff-ctrl-bg-hover: var(--surface-2);
    --ff-ctrl-border: var(--border);
    --ff-ctrl-text: var(--text);
    --ff-ctrl-muted: var(--text-muted);
}

/* =======================================================
   1) ng-dropdown-multiselect adapter (.ff-ms)
======================================================= */
body.ff-app .ff-ms .multiselect-parent,
body.ff-app .ff-ms .multiselect-parent > div {
    background: transparent !important;
}

    body.ff-app .ff-ms .multiselect-parent.btn-group.dropdown-multiselect
    button.dropdown-toggle.btn.btn-default {
        width: 100% !important;
        min-height: 34px !important;
        padding: 6px 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: var(--ff-ctrl-bg) !important;
        background-image: none !important;
        border: 1px solid var(--ff-ctrl-border) !important;
        border-radius: var(--radius-sm) !important;
        color: var(--ff-ctrl-text) !important;
        box-shadow: none !important;
    }

        body.ff-app .ff-ms .multiselect-parent.btn-group.dropdown-multiselect
        button.dropdown-toggle.btn.btn-default:hover {
            background: var(--ff-ctrl-bg-hover) !important;
            border-color: var(--primary-hover) !important;
        }

        body.ff-app .ff-ms .multiselect-parent.btn-group.dropdown-multiselect.open
        button.dropdown-toggle.btn.btn-default,
        body.ff-app .ff-ms .multiselect-parent.btn-group.dropdown-multiselect
        button.dropdown-toggle.btn.btn-default:focus {
            background: var(--ff-ctrl-bg) !important;
            border-color: var(--primary) !important;
            box-shadow: 0 0 0 3px var(--focus) !important;
        }

    body.ff-app .ff-ms .multiselect-parent button .caret {
        color: var(--ff-ctrl-muted) !important;
        border-top-color: currentColor !important;
    }

    body.ff-app .ff-ms .multiselect-parent > ul.dropdown-menu {
        background: var(--surface) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-md) !important;
        box-shadow: var(--shadow-1) !important;
    }


/* =======================================================
   2) ui-select adapter (.ff-ui)
   Fixes: contrast, hover white-on-white, stray white rectangle
======================================================= */

/* Kill any wrapper backgrounds (THIS is usually the “small white rectangle”) */
body.ff-app .ff-ui.ui-select-bootstrap,
body.ff-app .ff-ui.ui-select-bootstrap .ui-select-match,
body.ff-app .ff-ui.ui-select-bootstrap .ui-select-match.ng-scope,
body.ff-app .ff-ui.ui-select-bootstrap .ui-select-match.btn-default-focus {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

    /* The real control */
    body.ff-app .ff-ui.ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn,
    body.ff-app .ff-ui.ui-select-bootstrap > .ui-select-match > .btn {
        background: var(--ff-ctrl-bg) !important;
        background-image: none !important;
        color: var(--ff-ctrl-text) !important;
        border: 1px solid var(--ff-ctrl-border) !important;
        border-radius: var(--radius-sm) !important;
        box-shadow: none !important;
    }

    /* Defensive: some themes paint pseudo elements */
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-toggle::before,
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-toggle::after {
        background: transparent !important;
    }

    /* Hover/focus */
    body.ff-app .ff-ui.ui-select-bootstrap > .ui-select-match > .btn:hover {
        background: var(--ff-ctrl-bg-hover) !important;
        border-color: var(--primary-hover) !important;
    }

    body.ff-app .ff-ui.ui-select-bootstrap > .ui-select-match > .btn:focus,
    body.ff-app .ff-ui.ui-select-bootstrap.open > .ui-select-match > .btn {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 3px var(--focus) !important;
    }

    /* Keyboard tab focus lands on ui-select's off-screen focusser, which
       toggles .btn-default-focus on the match wrapper instead of focusing
       the visible button directly. Mirror the same ring onto the visible
       control so tab users get a clear focus state before opening it. */
    body.ff-app .ff-ui.ui-select-bootstrap > .ui-select-match.btn-default-focus > .ui-select-toggle.btn,
    body.ff-app .ff-ui.ui-select-bootstrap > .ui-select-match.btn-default-focus > .btn,
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-search:focus {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 3px var(--focus) !important;
        outline: none !important;
    }

    /* Search input when open */
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-search {
        background: var(--surface) !important;
        color: var(--text) !important;
        border: 1px solid var(--border) !important;
    }

    /* Dropdown menu */
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-choices,
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-choices-content {
        background: var(--surface) !important;
        border: 1px solid var(--border) !important;
    }

    /* Text contrast inside rows (your “hard to read” issue) */
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-choices-row-inner,
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-choices-row-inner * {
        color: var(--text) !important;
    }

    /* Hover + active (your “white on white” issue) */
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-choices-row:hover,
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-choices-row:hover > a,
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-choices-row.active,
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-choices-row.active > a {
        background: var(--surface-2) !important;
        color: var(--text) !important;
    }

    /* Highlight */
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-highlight {
        color: var(--primary) !important;
        font-weight: 700 !important;
        background: transparent !important;
    }

    /* This element can render as a tiny white block even when empty */
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-no-choice {
        background: transparent !important;
        margin: 0 !important;
        padding: 6px 10px !important;
    }

        body.ff-app .ff-ui.ui-select-bootstrap .ui-select-no-choice:empty {
            display: none !important;
        }

    /* Caret/clear should never paint */
    body.ff-app .ff-ui.ui-select-bootstrap i.caret,
    body.ff-app .ff-ui.ui-select-bootstrap a.btn-link {
        background: transparent !important;
    }




/* =========================================================
   ISLAND: Collection Management
   Add: class="ff-collection ff-dx ff-ms" on the page wrapper
========================================================= */

body.ff-app .ff-collection #page-title {
    background: transparent !important;
}

/* Stop legacy "bg-white" containers from forcing bright blocks */
body.ff-app .ff-collection .container-fullw.bg-white {
    background: transparent !important;
}

/* Make fieldsets match the Waybill island (clean + consistent) */
body.ff-app .ff-collection fieldset {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 14px 10px;
    margin-bottom: 14px;
}

body.ff-app .ff-collection legend {
    width: auto;
    padding: 0 8px;
    margin-bottom: 10px;
    border: 0;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}



/* Collection page toolbar: prevent overlap + keep it “button-like” */
body.ff-app .ff-collection .panel-heading .panel-heading-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 !important;
    padding: 0 !important;
}

    body.ff-app .ff-collection .panel-heading .panel-heading-tabs > li {
        padding-top: 0 !important; /* kills the legacy push-down */
    }

        /* Apply a consistent button surface to links/buttons + dropdown toggles */
        body.ff-app .ff-collection .panel-heading .panel-heading-tabs > li > a,
        body.ff-app .ff-collection .panel-heading .panel-heading-tabs > li > button,
        body.ff-app .ff-collection .panel-heading .panel-heading-tabs .btn-group > a.dropdown-toggle {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 40px;
            padding: 6px 10px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border) !important;
            background: var(--surface) !important;
            color: var(--text) !important;
            text-decoration: none !important;
            box-shadow: none !important;
        }

            body.ff-app .ff-collection .panel-heading .panel-heading-tabs > li > a:hover,
            body.ff-app .ff-collection .panel-heading .panel-heading-tabs > li > button:hover,
            body.ff-app .ff-collection .panel-heading .panel-heading-tabs .btn-group > a.dropdown-toggle:hover {
                background: var(--surface-2) !important;
                border-color: var(--primary-hover) !important;
            }

    /* Tighten the icon + label layout */
    body.ff-app .ff-collection .panel-heading .panel-heading-tabs .sparkline {
        line-height: 1;
    }

    body.ff-app .ff-collection .panel-heading .panel-heading-tabs .values p {
        margin: 0 !important;
        line-height: 1.1;
    }

/* Date range picker: keep the shared compact date range layout intact */
body.ff-app .ff-collection .range-picker {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    max-width: 248px;
}

    body.ff-app .ff-collection .range-picker .start-date,
    body.ff-app .ff-collection .range-picker .end-date {
        flex: 0 0 112px;
        min-width: 0;
        max-width: 112px;
    }

    body.ff-app .ff-collection .range-picker .input-group-addon {
        flex: 0 0 24px;
    }

/* Optional: give the grid container a clean surface so it doesn’t “float” */
body.ff-app .ff-collection #gridContainer {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

body.ff-app .ff-collection-update {
    overflow: visible;
}

body.ff-app .ff-collection-update-form {
    margin: 0;
}

body.ff-app .ff-collection-update-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
}

body.ff-app .ff-collection-update-actions {
    align-items: flex-end;
    margin-top: 6px;
}

body.ff-app .ff-collection-update .ff-collection-field {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 3px;
    min-width: 0;
    margin: 0;
}

body.ff-app .ff-collection-update label {
    margin: 0;
    line-height: 1.2;
}

body.ff-app .ff-collection-update .ff-collection-field-driver,
body.ff-app .ff-collection-update .ff-collection-field-vehicle {
    flex: 0 1 170px;
    max-width: 190px;
    min-width: 150px;
}

body.ff-app .ff-collection-update .ff-collection-field-cell {
    flex: 0 0 150px;
    min-width: 130px;
}

body.ff-app .ff-collection-update .ff-collection-field-date {
    flex: 0 0 92px;
    max-width: 98px;
    min-width: 90px;
}

body.ff-app .ff-collection-update .ff-collection-field-time {
    flex: 0 0 72px;
    max-width: 76px;
    min-width: 68px;
}

body.ff-app .ff-collection-update .ff-collection-field-note,
body.ff-app .ff-collection-update .ff-collection-field-comment {
    flex: 1 1 0;
    min-width: 260px;
    align-self: flex-start;
}

body.ff-app .ff-collection-update .ff-collection-field-button {
    flex: 0 0 152px;
    margin-left: auto;
    min-width: 140px;
    position: relative;
    z-index: 2;
}

body.ff-app .ff-collection-update .ff-collection-field-clear {
    flex: 0 0 auto;
    justify-content: flex-end;
    min-height: 37px;
    padding-bottom: 2px;
}

body.ff-app .ff-collection-update .ff-collection-field-clear .checkbox {
    margin: 0;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}

body.ff-app .ff-collection-update .ff-control,
body.ff-app .ff-collection-update .form-control,
body.ff-app .ff-collection-update .input-icon,
body.ff-app .ff-collection-update .ff-dx,
body.ff-app .ff-collection-update .dx-selectbox,
body.ff-app .ff-collection-update .dx-texteditor,
body.ff-app .ff-collection-update .ff-ui.ui-select-bootstrap {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

body.ff-app .ff-collection-update .dx-field,
body.ff-app .ff-collection-update .dx-field-value {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
}

body.ff-app .ff-collection-update .ui-select-match-text,
body.ff-app .ff-collection-update .ui-select-placeholder {
    max-width: calc(100% - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

body.ff-app .ff-collection-update .ff-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 37px;
    line-height: 1.2;
    transform: none !important;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    width: 100%;
}

body.ff-app .ff-collection-update .ff-collection-field-button .ff-btn:hover,
body.ff-app .ff-collection-update .ff-collection-field-button .ff-btn:focus,
body.ff-app .ff-collection-update .ff-collection-field-button .ff-btn:active {
    transform: none !important;
}

@media (max-width: 991px) {
    body.ff-app .ff-collection-update-fields {
        gap: 8px 10px;
    }

    body.ff-app .ff-collection-update .ff-collection-field-driver,
    body.ff-app .ff-collection-update .ff-collection-field-vehicle {
        flex: 0 1 150px;
        max-width: 175px;
        min-width: 135px;
    }

    body.ff-app .ff-collection-update .ff-collection-field-cell {
        flex: 0 1 120px;
        max-width: 140px;
        min-width: 108px;
    }

    body.ff-app .ff-collection-update .ff-collection-field-date {
        flex: 0 0 92px;
        max-width: 98px;
        min-width: 90px;
    }

    body.ff-app .ff-collection-update .ff-collection-field-time {
        flex: 0 0 72px;
        max-width: 76px;
        min-width: 68px;
    }

    body.ff-app .ff-collection-update .ff-collection-field-note,
    body.ff-app .ff-collection-update .ff-collection-field-comment {
        flex: 1 1 220px;
        min-width: 180px;
    }

    body.ff-app .ff-collection-update .ff-collection-field-button {
        flex: 0 0 132px;
        margin-left: auto;
        min-width: 120px;
    }

    body.ff-app .ff-collection-update .ff-collection-field-clear {
        flex: 0 0 auto;
        min-width: 0;
    }
}

@media (max-width: 640px) {
    body.ff-app .ff-collection-update .ff-collection-field-driver,
    body.ff-app .ff-collection-update .ff-collection-field-vehicle,
    body.ff-app .ff-collection-update .ff-collection-field-cell,
    body.ff-app .ff-collection-update .ff-collection-field-date,
    body.ff-app .ff-collection-update .ff-collection-field-time,
    body.ff-app .ff-collection-update .ff-collection-field-note,
    body.ff-app .ff-collection-update .ff-collection-field-comment,
    body.ff-app .ff-collection-update .ff-collection-field-button,
    body.ff-app .ff-collection-update .ff-collection-field-clear {
        flex: 1 1 100%;
        max-width: none;
        min-width: 0;
    }
}




body.ff-app .uib-datepicker-popup.dropdown-menu {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-1) !important;
}

body.ff-app .uib-datepicker-popup .btn {
    color: var(--text) !important;
}

    body.ff-app .uib-datepicker-popup .btn:hover {
        background: var(--surface-2) !important;
    }

/* =========================================================
   ISLAND: Manifest Generate
   Add: class="ff-manifest" on the page wrapper
========================================================= */



/* Fieldsets match your modern sections */
body.ff-app .ff-manifest fieldset {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 14px 10px;
    margin-bottom: 14px;
}

body.ff-app .ff-manifest legend {
    width: auto;
    padding: 0 8px;
    margin-bottom: 10px;
    border: 0;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Bridge legacy Bootstrap controls on this page */
body.ff-app .ff-manifest .form-control,
body.ff-app .ff-manifest select.form-control,
body.ff-app .ff-manifest textarea.form-control {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
}

    body.ff-app .ff-manifest .form-control::placeholder {
        color: var(--text-muted) !important;
    }

    body.ff-app .ff-manifest .form-control:focus {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 3px var(--focus) !important;
        outline: none !important;
    }

/* Fix toolbar layout + make the actions look like buttons */
body.ff-app .ff-manifest .panel-heading .panel-heading-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 !important;
    padding: 0 !important;
}

    body.ff-app .ff-manifest .panel-heading .panel-heading-tabs > li {
        padding-top: 0 !important;
    }

        /* Targets BOTH <button> and <a> in your toolbar */
        body.ff-app .ff-manifest .panel-heading .panel-heading-tabs > li > a,
        body.ff-app .ff-manifest .panel-heading .panel-heading-tabs > li > button,
        body.ff-app .ff-manifest .panel-heading .panel-heading-tabs .btn-group > a.dropdown-toggle {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 40px;
            padding: 6px 10px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border) !important;
            background: var(--surface) !important;
            color: var(--text) !important;
            text-decoration: none !important;
            box-shadow: none !important;
        }

    /* Beat the inline style="color:#333 !important" on dropdown toggles */
    body.ff-app .ff-manifest .panel-heading .panel-heading-tabs .btn-group > a.dropdown-toggle {
        color: var(--text) !important;
    }

        body.ff-app .ff-manifest .panel-heading .panel-heading-tabs > li > a:hover,
        body.ff-app .ff-manifest .panel-heading .panel-heading-tabs > li > button:hover,
        body.ff-app .ff-manifest .panel-heading .panel-heading-tabs .btn-group > a.dropdown-toggle:hover {
            background: var(--surface-2) !important;
            border-color: var(--primary-hover) !important;
        }

    body.ff-app .ff-manifest .panel-heading .panel-heading-tabs .values p {
        margin: 0 !important;
        line-height: 1.1;
    }

body.ff-app .ff-waybill .ff-manifest-details {
    margin-bottom: 6px !important;
    padding: 10px 12px 8px !important;
}

body.ff-app .ff-waybill .ff-manifest-details > legend {
    margin-bottom: 5px !important;
}

body.ff-app .ff-waybill .ff-manifest-details > .row {
    margin-bottom: 4px;
}

body.ff-app .ff-waybill .ff-manifest-details > .row:last-child {
    margin-bottom: 0;
}

body.ff-app .ff-waybill .ff-manifest-final-row,
body.ff-app .ff-waybill .ff-manifest-lookup-row {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill .ff-manifest-final-row::before,
body.ff-app .ff-waybill .ff-manifest-final-row::after,
body.ff-app .ff-waybill .ff-manifest-lookup-row::before,
body.ff-app .ff-waybill .ff-manifest-lookup-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill .ff-manifest-final-row > [class*="col-"],
body.ff-app .ff-waybill .ff-manifest-lookup-row > [class*="col-"] {
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-waybill .ff-manifest-final-row > .col-md-2 {
    flex: 1 1 165px;
}

body.ff-app .ff-waybill .ff-manifest-final-row > .col-md-3 {
    flex: 1.4 1 235px;
}

body.ff-app .ff-waybill .ff-manifest-final-row > .ff-manifest-status-option {
    flex: 0 0 auto;
    min-width: 92px;
}

body.ff-app .ff-waybill .ff-manifest-final-row > .ff-manifest-status-related {
    min-width: 172px;
}

body.ff-app .ff-waybill .ff-manifest-status-option .checkbox-inline {
    margin: 0;
    padding-top: 6px !important;
    white-space: nowrap;
}

body.ff-app .ff-waybill .ff-manifest-lookup-field {
    flex: 0 1 195px;
}

body.ff-app .ff-waybill .ff-manifest-lookup-related {
    flex: 0 1 235px;
}

body.ff-app .ff-waybill .ff-manifest-lookup-actions {
    align-items: flex-end;
    display: flex;
    flex: 1 1 360px;
    gap: 6px;
    justify-content: flex-end;
    padding-top: 19px !important;
}

body.ff-app .ff-waybill .ff-manifest-lookup-actions .btn {
    min-height: var(--ff-control-h);
    padding-bottom: 6px;
    padding-top: 6px;
    white-space: nowrap;
}

body.ff-app .ff-waybill .ff-manifest-grid-row {
    margin-top: 0 !important;
}

body.ff-app .ff-waybill .ff-manifest-grid-panel {
    margin-bottom: 8px !important;
}

body.ff-app .ff-waybill .ff-manifest-grid-panel .panel-heading {
    min-height: 0;
}

body.ff-app .ff-waybill .ff-manifest-grid-heading-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 3px 10px;
    line-height: 22px !important;
    padding-top: 2px !important;
}

body.ff-app .ff-waybill .ff-manifest-grid-heading-row::before,
body.ff-app .ff-waybill .ff-manifest-grid-heading-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill .ff-manifest-grid-heading-row > [class*="col-"] {
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0 !important;
    width: auto;
}

body.ff-app .ff-waybill .ff-manifest-grid-heading-row h4 {
    font-size: 15px;
    line-height: 1.2;
    margin: 2px 0;
}

body.ff-app .ff-waybill .ff-manifest-grid-heading-row strong {
    white-space: nowrap;
}

body.ff-app .ff-waybill .ff-manifest-grid-count {
    flex: 0 1 185px;
}

body.ff-app .ff-waybill .ff-manifest-grid-heading-row > .ff-manifest-wb-entry-row {
    flex: 1 1 560px;
    margin-left: auto !important;
}

body.ff-app .ff-waybill .ff-manifest-grid-panel .panel-body {
    padding: 4px 8px 8px !important;
}

body.ff-app .ff-waybill .ff-manifest-grid-panel .panel-body > .row {
    margin-bottom: 0;
}

body.ff-app .ff-waybill .ff-manifest-footer-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: -4px 0 0 0 !important;
}

body.ff-app .ff-waybill .ff-manifest-footer-row::before,
body.ff-app .ff-waybill .ff-manifest-footer-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill .ff-manifest-footer-row > [class*="col-"] {
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-waybill .ff-manifest-footer-print {
    align-items: center;
    display: flex;
    flex: 0 1 210px;
    min-height: var(--ff-control-h);
}

body.ff-app .ff-waybill .ff-manifest-footer-checkbox {
    margin: 0 !important;
    padding-top: 0 !important;
    white-space: nowrap;
}

body.ff-app .ff-waybill .ff-manifest-footer-actions {
    flex: 1 1 430px;
}

body.ff-app .ff-waybill .ff-manifest-footer-action-group {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

body.ff-app .ff-waybill .ff-manifest-footer-action-group .btn {
    min-height: var(--ff-control-h);
    padding-bottom: 6px;
    padding-top: 6px;
    white-space: nowrap;
}

body.ff-app .ff-waybill .ff-manifest-wb-entry-row {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    justify-content: flex-end;
}

body.ff-app .ff-waybill .ff-manifest-wb-entry-row::before,
body.ff-app .ff-waybill .ff-manifest-wb-entry-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill .ff-manifest-wb-entry-option {
    flex: 0 0 auto;
    float: none;
    min-width: 92px;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-waybill .ff-manifest-wb-entry-option .checkbox-inline {
    margin: 0;
    padding-top: 3px;
    white-space: nowrap;
}

body.ff-app .ff-waybill .ff-manifest-wb-entry-input {
    flex: 1 1 240px;
    min-width: 220px;
}

body.ff-app .ff-waybill .ff-manifest-wb-entry-input .input-group {
    width: 100%;
}

body.ff-app .ff-waybill .ff-manifest-wb-entry-input .margin-top-5 {
    margin-top: 0 !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-final-row {
    gap: 2px 8px !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-final-row .form-group,
body.ff-app .ff-generate-manifest .ff-manifest-final-row .dx-field {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    min-width: 0 !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-final-row label {
    line-height: 14px !important;
    margin: 0 0 1px !important;
    min-height: 14px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-schedule-field .ff-control,
body.ff-app .ff-generate-manifest .ff-manifest-schedule-field .ui-select-container,
body.ff-app .ff-generate-manifest .ff-manifest-schedule-field .ui-select-bootstrap,
body.ff-app .ff-generate-manifest .ff-manifest-schedule-field .ui-select-bootstrap > .ui-select-match,
body.ff-app .ff-generate-manifest .ff-manifest-schedule-field .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-generate-manifest .ff-manifest-schedule-field .ui-select-bootstrap > .ui-select-match > .ui-select-toggle {
    height: var(--ff-control-h) !important;
    margin-top: 0 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-grid-heading-row {
    align-items: center !important;
    gap: 1px 8px !important;
    line-height: 20px !important;
    padding-top: 0 !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-grid-heading-row > [class*="col-"] {
    padding-top: 0 !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-grid-count {
    flex: 0 1 160px !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-load-mass,
body.ff-app .ff-generate-manifest .ff-manifest-vehicle-max,
body.ff-app .ff-generate-manifest .ff-manifest-available-mass,
body.ff-app .ff-generate-manifest .ff-manifest-overloaded-mass {
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-grid-heading-row > .ff-manifest-wb-entry-row {
    align-items: center !important;
    display: flex !important;
    flex: 1 1 440px !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0 6px !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    margin-bottom: 0 !important;
    min-height: 20px !important;
    padding: 0 !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-wb-entry-row {
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0 6px !important;
    justify-content: flex-end !important;
    margin-bottom: 0 !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-wb-entry-row > .ff-manifest-wb-entry-option,
body.ff-app .ff-generate-manifest .ff-manifest-wb-entry-row > .col-sm-2.ff-manifest-wb-entry-option {
    flex: 0 0 auto !important;
    float: none !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

/* Generate Manifest: keep the bottom grid contained and give it enough vertical room. */
body.ff-app .ff-generate-manifest .ff-manifest-grid-row {
    margin-top: 6px !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-grid-panel {
    margin-bottom: 0 !important;
    overflow: visible !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-grid-panel .panel-heading {
    padding-bottom: 0 !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-grid-panel .panel-body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 4px !important;
}

body.ff-app .ff-generate-manifest .ff-grid-toolbar-row {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
}

body.ff-app .ff-generate-manifest .ff-grid-result-row,
body.ff-app .ff-generate-manifest .ff-grid-result-row > .col-md-12 {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

body.ff-app .ff-generate-manifest #gridContainer {
    height: clamp(320px, calc(100vh - 335px), 680px) !important;
    min-height: 320px !important;
    overflow: hidden !important;
}

body.ff-app .ff-generate-manifest #gridContainer .dx-datagrid {
    height: 100% !important;
    max-height: 100% !important;
}

body.ff-app .ff-generate-manifest #gridContainer .dx-datagrid-rowsview {
    min-height: calc(var(--ff-grid-row-height) * 3) !important;
}

body.ff-app .ff-generate-manifest #gridContainer .dx-command-select,
body.ff-app .ff-generate-manifest #gridContainer .dx-command-select > td,
body.ff-app .ff-generate-manifest #gridContainer .dx-command-select > tr > td {
    max-width: 30px !important;
    min-width: 30px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    width: 30px !important;
}

body.ff-app .ff-generate-manifest #gridContainer .dx-command-select .dx-checkbox,
body.ff-app .ff-generate-manifest #gridContainer .dx-command-select .dx-checkbox-container {
    display: inline-flex !important;
    height: 18px !important;
    justify-content: center !important;
    margin: 0 auto !important;
    min-height: 18px !important;
    vertical-align: middle !important;
}

body.ff-app .ff-generate-manifest #gridContainer .ff-manifest-command-col,
body.ff-app .ff-generate-manifest #gridContainer .ff-manifest-command-col > td,
body.ff-app .ff-generate-manifest #gridContainer .ff-manifest-command-col > tr > td {
    max-width: 34px !important;
    min-width: 34px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    width: 34px !important;
}

body.ff-app .ff-generate-manifest #gridContainer .ff-manifest-row-actions,
body.ff-app .ff-generate-manifest #gridContainer .ff-manifest-row-actions .dx-dropdownbutton,
body.ff-app .ff-generate-manifest #gridContainer .ff-manifest-row-actions .dx-button {
    height: 20px !important;
    min-height: 20px !important;
    width: 24px !important;
}

body.ff-app .ff-generate-manifest #gridContainer .ff-manifest-row-actions .dx-button-content {
    justify-content: center !important;
    padding: 0 !important;
}

body.ff-app .ff-generate-manifest #gridContainer .ff-manifest-row-actions .dx-button-text {
    display: none !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-footer-row {
    clear: both !important;
    margin: 8px 0 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-footer-action-group {
    position: static !important;
}

/* Generate Manifest filters: page-scoped wrapping so hub/list fields can use spare row space. */
body.ff-app .ff-generate-manifest .ff-sr-card {
    align-items: flex-start !important;
    column-gap: 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 3px !important;
}

body.ff-app .ff-generate-manifest .ff-sr-card > .ff-sr-legend,
body.ff-app .ff-generate-manifest .ff-sr-card > .ff-filter-actions-slot {
    flex: 0 0 100% !important;
}

body.ff-app .ff-generate-manifest .ff-sr-card > .ff-waybill-filter-grid,
body.ff-app .ff-generate-manifest .ff-sr-card > .ff-filter-flow-row {
    display: contents !important;
}

body.ff-app .ff-generate-manifest .ff-waybill-filter-grid > [class*="col-"],
body.ff-app .ff-generate-manifest .ff-filter-flow-row > [class*="col-"],
body.ff-app .ff-generate-manifest .ff-filter-inline-row > [class*="col-"] {
    float: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-generate-manifest .ff-filter-field,
body.ff-app .ff-generate-manifest .ff-filter-field .form-group {
    align-self: flex-start !important;
    margin-bottom: 0 !important;
    min-width: 0 !important;
}

body.ff-app .ff-generate-manifest .ff-filter-field .ff-control,
body.ff-app .ff-generate-manifest .ff-filter-field .form-control,
body.ff-app .ff-generate-manifest .ff-filter-field .ui-select-container,
body.ff-app .ff-generate-manifest .ff-filter-field .ui-select-bootstrap,
body.ff-app .ff-generate-manifest .ff-filter-field .ui-select-bootstrap > .ui-select-match,
body.ff-app .ff-generate-manifest .ff-filter-field .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-generate-manifest .ff-filter-field .ui-select-bootstrap > .ui-select-match > .ui-select-toggle,
body.ff-app .ff-generate-manifest .ff-filter-field .ff-dx,
body.ff-app .ff-generate-manifest .ff-filter-field .dx-widget,
body.ff-app .ff-generate-manifest .ff-filter-field .dx-texteditor {
    height: var(--ff-control-h) !important;
    margin-top: 0 !important;
    max-height: var(--ff-control-h) !important;
    max-width: 100% !important;
    min-height: var(--ff-control-h) !important;
    width: 100% !important;
}

body.ff-app .ff-generate-manifest .ff-filter-field label {
    line-height: 16px !important;
    margin: 0 0 1px !important;
    min-height: 16px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-generate-manifest .ff-filter-id {
    flex: 1 1 255px !important;
}

body.ff-app .ff-generate-manifest .ff-filter-date-type {
    flex: 0 1 150px !important;
}

body.ff-app .ff-generate-manifest .ff-filter-date-period {
    flex: 0 1 155px !important;
}

body.ff-app .ff-generate-manifest .ff-filter-date-range {
    flex: 0 1 292px !important;
}

body.ff-app .ff-generate-manifest .ff-filter-branch,
body.ff-app .ff-generate-manifest .ff-filter-client,
body.ff-app .ff-generate-manifest .ff-filter-agent,
body.ff-app .ff-generate-manifest .ff-filter-driver,
body.ff-app .ff-generate-manifest .ff-filter-vehicle {
    flex: 1 1 240px !important;
}

body.ff-app .ff-generate-manifest .ff-filter-acc,
body.ff-app .ff-generate-manifest .ff-filter-internal-id,
body.ff-app .ff-generate-manifest .ff-filter-receiver-acc {
    flex: 0 1 112px !important;
}

body.ff-app .ff-generate-manifest .ff-filter-ref,
body.ff-app .ff-generate-manifest .ff-filter-order,
body.ff-app .ff-generate-manifest .ff-filter-manifest-no,
body.ff-app .ff-generate-manifest .ff-filter-courier,
body.ff-app .ff-generate-manifest .ff-filter-invoice,
body.ff-app .ff-generate-manifest .ff-filter-parcel-desc {
    flex: 0 1 165px !important;
}

body.ff-app .ff-generate-manifest .ff-filter-schedule,
body.ff-app .ff-generate-manifest .ff-filter-origin-hub,
body.ff-app .ff-generate-manifest .ff-filter-destination-hub,
body.ff-app .ff-generate-manifest .ff-filter-town,
body.ff-app .ff-generate-manifest .ff-filter-route,
body.ff-app .ff-generate-manifest .ff-filter-service,
body.ff-app .ff-generate-manifest .ff-filter-party,
body.ff-app .ff-generate-manifest .ff-filter-box,
body.ff-app .ff-generate-manifest .ff-filter-capture-method,
body.ff-app .ff-generate-manifest .ff-filter-user {
    flex: 1 1 210px !important;
}

body.ff-app .ff-generate-manifest .ff-filter-pc-kgs-group,
body.ff-app .ff-generate-manifest .ff-filter-extra-group {
    flex: 0 1 auto !important;
}

body.ff-app .ff-generate-manifest .ff-filter-inline-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px 6px !important;
}

body.ff-app .ff-generate-manifest .ff-filter-bool-group {
    flex: 1 1 100% !important;
}

body.ff-app .ff-generate-manifest .ff-filter-bool-group .ff-filter-bool {
    flex: 0 1 64px !important;
    max-width: 76px !important;
    min-width: 58px !important;
}

body.ff-app .ff-generate-manifest .ff-filter-bool-group .ff-filter-bool-wide,
body.ff-app .ff-generate-manifest .ff-filter-bool-group .ff-filter-security {
    flex: 0 1 78px !important;
    max-width: 92px !important;
    min-width: 70px !important;
}

body.ff-app .ff-generate-manifest .ff-filter-bool-group select.form-control {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-wb-entry-option .checkbox,
body.ff-app .ff-generate-manifest .ff-manifest-wb-entry-option .checkbox-inline {
    align-items: center !important;
    display: inline-flex !important;
    height: 18px !important;
    line-height: 18px !important;
    margin: 0 !important;
    min-height: 18px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-wb-entry-option .checkbox label {
    line-height: 18px !important;
    margin-right: 0 !important;
    min-height: 18px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-wb-entry-option .clip-check input[type="checkbox"]:checked + label::after,
body.ff-app .ff-generate-manifest .ff-manifest-wb-entry-option .clip-check input[type="checkbox"]:checked + label:after {
    left: 2px !important;
}

/* uib-datepicker popup */
body.ff-app .uib-datepicker-popup.dropdown-menu {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-1) !important;
}




/* =========================================================
   SHARED ISLAND: Form Pages
   Add: .ff-formpage to any page wrapper that should look modern
========================================================= */

body.ff-app .ff-formpage fieldset {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 14px 10px;
    margin-bottom: 14px;
}

body.ff-app .ff-formpage legend {
    width: auto;
    padding: 0 8px;
    margin-bottom: 10px;
    border: 0;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Bootstrap inputs */
body.ff-app .ff-formpage .form-control,
body.ff-app .ff-formpage select.form-control,
body.ff-app .ff-formpage textarea.form-control {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
}

    body.ff-app .ff-formpage .form-control::placeholder {
        color: var(--text-muted) !important;
    }

    body.ff-app .ff-formpage .form-control:focus {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 3px var(--focus) !important;
        outline: none !important;
    }

body.ff-app .ff-formpage #page-title {
    background: transparent !important;
}

body.ff-app .ff-formpage .container-fullw.bg-white {
    background: transparent !important;
}
/* =========================================================
   SHARED: legacy panel-heading tabs -> modern button strip
========================================================= */
body.ff-app .ff-toolbar-legacy .panel-heading .panel-heading-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 !important;
    padding: 0 !important;
}

    body.ff-app .ff-toolbar-legacy .panel-heading .panel-heading-tabs > li {
        padding-top: 0 !important;
    }

        body.ff-app .ff-toolbar-legacy .panel-heading .panel-heading-tabs > li > a,
        body.ff-app .ff-toolbar-legacy .panel-heading .panel-heading-tabs > li > button,
        body.ff-app .ff-toolbar-legacy .panel-heading .panel-heading-tabs .btn-group > a.dropdown-toggle {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 40px;
            padding: 6px 10px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border) !important;
            background: var(--surface) !important;
            color: var(--text) !important;
            text-decoration: none !important;
            box-shadow: none !important;
        }

    /* beats inline color:#333 !important */
    body.ff-app .ff-toolbar-legacy .panel-heading .panel-heading-tabs .btn-group > a.dropdown-toggle {
        color: var(--text) !important;
    }

        body.ff-app .ff-toolbar-legacy .panel-heading .panel-heading-tabs > li > a:hover,
        body.ff-app .ff-toolbar-legacy .panel-heading .panel-heading-tabs > li > button:hover,
        body.ff-app .ff-toolbar-legacy .panel-heading .panel-heading-tabs .btn-group > a.dropdown-toggle:hover {
            background: var(--surface-2) !important;
            border-color: var(--primary-hover) !important;
        }

    body.ff-app .ff-toolbar-legacy .panel-heading .panel-heading-tabs .values p {
        margin: 0 !important;
        line-height: 1.1;
    }

/* =========================================================
   SHARED ISLAND: Form Pages
   Add: .ff-formpage to any page wrapper that should look modern
========================================================= */

/* =========================================================
   SHARED: Wizard / Stepper (1-2-3-4)
   Add: .ff-wizard on the page wrapper
========================================================= */

/* ---------- A) SmartWizard / ClipTwo style (very common) ---------- */
body.ff-app .ff-wizard .swMain,
body.ff-app .ff-wizard .swMain .stepContainer {
    background: transparent !important;
}

    /* the step strip container */
    body.ff-app .ff-wizard .swMain ul.anchor,
    body.ff-app .ff-wizard ul.anchor {
        list-style: none !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        display: flex !important;
        gap: 8px !important;
        flex-wrap: wrap;
    }

        /* each step link */
        body.ff-app .ff-wizard .swMain ul.anchor li a,
        body.ff-app .ff-wizard ul.anchor li a {
            display: inline-flex !important;
            align-items: center !important;
            gap: 10px !important;
            padding: 10px 12px !important;
            border-radius: var(--radius-sm) !important;
            border: 1px solid var(--border) !important;
            background: var(--surface) !important;
            color: var(--text) !important;
            text-decoration: none !important;
            box-shadow: none !important;
        }

            /* number bubble (often .stepNumber) */
            body.ff-app .ff-wizard .swMain ul.anchor li a .stepNumber,
            body.ff-app .ff-wizard ul.anchor li a .stepNumber {
                width: 26px !important;
                height: 26px !important;
                border-radius: 999px !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                border: 1px solid var(--border) !important;
                background: var(--surface-2) !important;
                color: var(--text) !important;
                font-weight: 700 !important;
            }

            /* selected/current step */
            body.ff-app .ff-wizard .swMain ul.anchor li a.selected,
            body.ff-app .ff-wizard ul.anchor li a.selected {
                border-color: var(--primary) !important;
                background: var(--nav-active-bg) !important;
            }

                body.ff-app .ff-wizard .swMain ul.anchor li a.selected .stepNumber,
                body.ff-app .ff-wizard ul.anchor li a.selected .stepNumber {
                    background: var(--primary) !important;
                    border-color: var(--primary) !important;
                    color: var(--on-primary) !important;
                }

            /* done step */
            body.ff-app .ff-wizard .swMain ul.anchor li a.done,
            body.ff-app .ff-wizard ul.anchor li a.done {
                border-color: rgba(82,196,26,0.45) !important;
            }

                body.ff-app .ff-wizard .swMain ul.anchor li a.done .stepNumber,
                body.ff-app .ff-wizard ul.anchor li a.done .stepNumber {
                    background: rgba(82,196,26,0.18) !important;
                    border-color: rgba(82,196,26,0.45) !important;
                }

            /* disabled/future step */
            body.ff-app .ff-wizard .swMain ul.anchor li a.disabled,
            body.ff-app .ff-wizard ul.anchor li a.disabled {
                opacity: 0.6 !important;
                cursor: not-allowed !important;
            }

/* ---------- B) If your “steps” are Bootstrap nav-pills ---------- */
body.ff-app .ff-wizard .nav.nav-pills {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap;
    margin-bottom: 12px !important;
}

    body.ff-app .ff-wizard .nav.nav-pills > li > a {
        border: 1px solid var(--border) !important;
        background: var(--surface) !important;
        color: var(--text) !important;
        border-radius: var(--radius-sm) !important;
    }

    body.ff-app .ff-wizard .nav.nav-pills > li.active > a,
    body.ff-app .ff-wizard .nav.nav-pills > li.active > a:hover,
    body.ff-app .ff-wizard .nav.nav-pills > li.active > a:focus {
        border-color: var(--primary) !important;
        background: var(--nav-active-bg) !important;
        color: var(--text) !important;
    }
body.ff-app .ff-formpage .badge-warning {
    white-space: normal;
    display: inline-block;
    word-wrap: break-word;
    max-width: 100%;
}

/* --- Wizard step bar (1-2-3-4) BACKPLATE --- */
body.ff-app #wizard.swMain > ul{
  background: var(--surface) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 8px !important;
}

/* Dark theme override */
body.ff-app[data-theme="dark"] #wizard.swMain > ul{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* Make sure the individual step links aren’t painting white */
body.ff-app #wizard.swMain > ul > li > a{
  background: transparent !important;
  box-shadow: none !important;
}

/* Optional: nicer step circles */
body.ff-app #wizard.swMain > ul > li > a .stepNumber{
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
}
body.ff-app[data-theme="dark"] #wizard.swMain > ul > li > a .stepNumber{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
}


/* =========================================================
   UI Bootstrap Datepicker (uib-datepicker-popup) — token driven
   Put this at the END of the file.
========================================================= */

/* Popup shell */
body.ff-app .uib-datepicker-popup.dropdown-menu {
    padding: 10px 10px 8px !important;
    min-width: auto !important;
    background: var(--surface) !important;
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-1) !important;
}

/* Kill any “table defaults” that paint white */
body.ff-app .uib-datepicker-popup .uib-daypicker,
body.ff-app .uib-datepicker-popup table,
body.ff-app .uib-datepicker-popup thead,
body.ff-app .uib-datepicker-popup tbody,
body.ff-app .uib-datepicker-popup tr,
body.ff-app .uib-datepicker-popup th,
body.ff-app .uib-datepicker-popup td {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
}

    /* Header strip (month + arrows) */
    body.ff-app .uib-datepicker-popup .uib-daypicker table thead tr:first-child th {
        padding-bottom: 6px !important;
    }

body.ff-app .uib-datepicker-popup .uib-title,
body.ff-app .uib-datepicker-popup .uib-left,
body.ff-app .uib-datepicker-popup .uib-right {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    color: var(--text) !important;
    box-shadow: none !important;
    border-radius: var(--radius-sm) !important;
}

    body.ff-app .uib-datepicker-popup .uib-title strong {
        color: var(--text) !important;
        font-weight: 700 !important;
    }

    body.ff-app .uib-datepicker-popup .uib-title:hover,
    body.ff-app .uib-datepicker-popup .uib-left:hover,
    body.ff-app .uib-datepicker-popup .uib-right:hover {
        background: var(--surface-2) !important;
        background-color: var(--surface-2) !important;
    }

/* Day-of-week labels */
body.ff-app .uib-datepicker-popup small {
    color: var(--text-muted) !important;
    font-weight: 600 !important;
}

/* Cells spacing */
body.ff-app .uib-datepicker-popup th,
body.ff-app .uib-datepicker-popup td {
    padding: 2px !important;
}

/* Day buttons: make btn-default not “white” */
body.ff-app .uib-datepicker-popup .uib-day button.btn.btn-default {
    width: 32px !important;
    height: 28px !important;
    padding: 0 !important;
    line-height: 28px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

    body.ff-app .uib-datepicker-popup .uib-day button.btn.btn-default:hover:not(:disabled) {
        background: var(--surface-2) !important;
        background-color: var(--surface-2) !important;
        border-color: var(--border) !important;
    }

    body.ff-app .uib-datepicker-popup .uib-day button.btn.btn-default:focus-visible {
        outline: none !important;
        box-shadow: 0 0 0 3px var(--focus) !important;
    }

/* Secondary month days (the ones with .text-muted) */
body.ff-app .uib-datepicker-popup .uib-day .text-muted {
    color: var(--text-disabled) !important;
}

/* “Today” marker (uib uses .text-info on the span) */
body.ff-app .uib-datepicker-popup .uib-day .text-info {
    color: var(--primary) !important;
    font-weight: 700 !important;
}

/* Selected day: uib uses btn-info + active; force correct contrast,
   and FIX the span that still has .text-info (blue-on-blue bug) */
body.ff-app .uib-datepicker-popup .uib-day button.btn.btn-info,
body.ff-app .uib-datepicker-popup .uib-day button.btn.btn-info.active {
    background: var(--primary) !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
}

    body.ff-app .uib-datepicker-popup .uib-day button.btn.btn-info span,
    body.ff-app .uib-datepicker-popup .uib-day button.btn.btn-info.active span,
    body.ff-app .uib-datepicker-popup .uib-day button.btn.btn-info .text-info {
        color: var(--on-primary) !important; /* key: beats .text-info */
    }

/* Disabled days */
body.ff-app .uib-datepicker-popup .uib-day button.btn:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

/* Week numbers (if showWeeks=true) */
body.ff-app .uib-datepicker-popup td.h6,
body.ff-app .uib-datepicker-popup td.h6 em {
    color: var(--text-muted) !important;
}

/* Button bar */
body.ff-app .uib-datepicker-popup .uib-button-bar {
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--divider) !important;
    background: transparent !important;
}

    body.ff-app .uib-datepicker-popup .uib-button-bar .btn {
        border-radius: var(--radius-sm) !important;
        box-shadow: none !important;
    }

    /* Map bootstrap semantic btn colors to your tokens (optional but consistent) */
    body.ff-app .uib-datepicker-popup .uib-button-bar .btn-info {
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: var(--on-primary) !important;
    }

    body.ff-app .uib-datepicker-popup .uib-button-bar .btn-danger {
        background: var(--error) !important;
        border-color: var(--error) !important;
        color: #fff !important;
    }

    body.ff-app .uib-datepicker-popup .uib-button-bar .btn-success {
        background: var(--success) !important;
        border-color: var(--success) !important;
        color: #fff !important;
    }


/* =========================================================
   ISLAND: Anonymous Tracking (Public / External Tracking)
   Put at END of file.
========================================================= */

body.ff-app .ff-anon-container {
    padding: 0 50px;
}

@media (max-width: 992px) {
    body.ff-app .ff-anon-container {
        padding: 0 16px;
    }
}

/* Make panels behave like ff-cards on this page */
body.ff-app .ff-anon-tracking .panel {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-1) !important;
    overflow: hidden;
}

body.ff-app .ff-anon-tracking .panel-heading {
    background: var(--surface-2) !important;
    border-bottom: 1px solid var(--border) !important;
}

body.ff-app .ff-anon-tracking .panel-title {
    color: var(--text) !important;
}

/* Tabs (uib-tabset renders Bootstrap nav-tabs) */
body.ff-app .ff-anon-tracking .ff-tabs .nav-tabs {
    border-bottom: 1px solid var(--border) !important;
    margin-bottom: 0 !important;
}

    body.ff-app .ff-anon-tracking .ff-tabs .nav-tabs > li > a {
        border: 1px solid transparent !important;
        color: var(--text) !important;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
    }

        body.ff-app .ff-anon-tracking .ff-tabs .nav-tabs > li > a:hover {
            background: var(--surface-2) !important;
            color: var(--text) !important;
            border-color: var(--border) var(--border) transparent !important;
        }

    body.ff-app .ff-anon-tracking .ff-tabs .nav-tabs > li.active > a,
    body.ff-app .ff-anon-tracking .ff-tabs .nav-tabs > li.active > a:hover,
    body.ff-app .ff-anon-tracking .ff-tabs .nav-tabs > li.active > a:focus {
        background: var(--surface) !important;
        color: var(--text) !important;
        border-color: var(--border) var(--border) transparent !important;
    }

/* Tab content plate */
body.ff-app .ff-anon-tracking .ff-tabs .tab-content {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-top: 0 !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
    padding: 14px;
}

/* Tables in dark mode */
body.ff-app .ff-anon-tracking .table {
    color: var(--text) !important;
}

    body.ff-app .ff-anon-tracking .table > tbody > tr > td {
        border-top: 1px solid var(--divider) !important;
    }

body.ff-app .ff-anon-tracking .trackingInfoLabelTD {
    color: var(--text-muted) !important;
    font-weight: 600;
    width: 140px;
}

/* Misc */
body.ff-app .ff-anon-tracking .shipmentheader {
    margin: 10px 0 6px;
    color: var(--text) !important;
    font-weight: 700;
}

body.ff-app .ff-anon-tracking .ff-inline-muted {
    color: var(--text) !important;
    font-weight: 700;
}

/* Make iframe responsive (override old width=800 usage) */
body.ff-app .ff-anon-tracking #iframepdf {
    width: 100% !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

/* =========================================================
   SIDEBAR FLYOUT + SUBMENU (FINAL OVERRIDE)
   - Fix flyout header not taking blue
   - Fix flyout panel looking transparent
   - Ensure active item highlighting is obvious
   Put at VERY END after theme-purple.css
========================================================= */

/* Helper: match BOTH possible placements of .app-sidebar-closed */
body.ff-app .app-sidebar-closed .app-aside,
body.ff-app #app.app-sidebar-closed .app-aside {
    z-index: 40000 !important;
}

    /* =========================================================
   A) CLONED FLYOUT HEADER (the "Finance" bar)
   This is a cloned .item-inner appended directly under .app-aside.
   Theme-purple often paints overlays via ::before/::after — we kill those.
========================================================= */

    body.ff-app .app-sidebar-closed .app-aside > .item-inner,
    body.ff-app #app.app-sidebar-closed .app-aside > .item-inner {
        /* Make it clearly “section header” blue */
        background: var(--nav-active-bg) !important;
        background-color: var(--nav-active-bg) !important;
        background-image: none !important;
        border: 1px solid var(--nav-active-border) !important;
        border-left: 4px solid var(--nav-active) !important;
        border-radius: var(--radius-sm) !important;
        box-shadow: var(--shadow-1) !important;
        opacity: 1 !important;
        filter: none !important;
        padding: 10px 12px !important;
        margin: 0 !important;
        z-index: 40001 !important;
    }

        /* Force header text/icon colors (theme-purple often targets .title specifically) */
        body.ff-app .app-sidebar-closed .app-aside > .item-inner,
        body.ff-app .app-sidebar-closed .app-aside > .item-inner *,
        body.ff-app #app.app-sidebar-closed .app-aside > .item-inner,
        body.ff-app #app.app-sidebar-closed .app-aside > .item-inner * {
            color: var(--nav-active-text) !important;
        }

            /* Kill any overlay wedges/gradients/pseudo-painting on the header */
            body.ff-app .app-sidebar-closed .app-aside > .item-inner::before,
            body.ff-app .app-sidebar-closed .app-aside > .item-inner::after,
            body.ff-app #app.app-sidebar-closed .app-aside > .item-inner::before,
            body.ff-app #app.app-sidebar-closed .app-aside > .item-inner::after {
                content: none !important;
                background: none !important;
                border: 0 !important;
                box-shadow: none !important;
            }

    /* =========================================================
   B) CLONED FLYOUT PANEL (the UL appended to .app-aside)
========================================================= */

    body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu,
    body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu {
        /* Solid panel (no wash-out) */
        background: var(--nav-bg) !important;
        background-color: var(--nav-bg) !important;
        background-image: none !important;
        border: 1px solid var(--nav-border) !important;
        border-radius: var(--radius-md) !important;
        box-shadow: var(--shadow-1) !important;
        opacity: 1 !important; /* <- fixes the “transparent” look */
        filter: none !important;
        padding: 6px 0 !important;
        margin: 0 !important;
        max-height: calc(100vh - 12px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        z-index: 40001 !important;
    }

        /* Kill any pseudo painting on the popup UL too */
        body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu::before,
        body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu::after,
        body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu::before,
        body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu::after {
            content: none !important;
            background: none !important;
            border: 0 !important;
        }

        /* Rows / links */
        body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li > a,
        body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li > a {
            display: block !important;
            background: transparent !important;
            background-image: none !important;
            color: var(--nav-text) !important;
            padding: 10px 12px !important;
            margin: 0 !important;
            border: 0 !important;
            border-bottom: 1px solid var(--nav-border) !important;
            text-decoration: none !important;
            opacity: 1 !important;
        }

            /* Ensure link descendants are readable */
            body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li > a *,
            body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li > a * {
                color: inherit !important;
            }

        body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li:last-child > a,
        body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li:last-child > a {
            border-bottom: 0 !important;
        }

        /* Hover */
        html.no-touch body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li > a:hover,
        html.no-touch body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li > a:hover,
        body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li:hover > a,
        body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li:hover > a {
            background: var(--nav-bg-2) !important;
            background-color: var(--nav-bg-2) !important;
            color: var(--nav-text) !important;
        }

        /* Active/current row (supports legacy patterns) */
        body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li.active > a,
        body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li.active-state > a,
        body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li.open > a,
        body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li > a.active,
        body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li.active > a,
        body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li.active-state > a,
        body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li.open > a,
        body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li > a.active {
            background: var(--nav-active-bg) !important;
            background-color: var(--nav-active-bg) !important;
            color: var(--nav-active-text) !important;
            border-left: 4px solid var(--nav-active) !important;
            margin: 0 !important;
            border-radius: var(--radius-sm) !important;
            padding-left: 4px !important;
            font-weight: normal;
        }

            /* Don’t let hover override the active state */
            body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li.active > a:hover,
            body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li.active-state > a:hover,
            body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li > a.active:hover,
            body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li.active > a:hover,
            body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li.active-state > a:hover,
            body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li > a.active:hover {
                background: var(--nav-active-bg) !important;
                background-color: var(--nav-active-bg) !important;
                color: var(--nav-active-text) !important;
            }

/* =========================================================
   C) NORMAL (NON-CLONED) SUBMENUS (sidebar open)
========================================================= */

body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu {
    background: transparent !important;
}

    body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li > a {
        background: transparent !important;
        color: var(--nav-text-muted) !important;
        text-decoration: none !important;
    }

        body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li > a:hover {
            background: var(--nav-bg-2) !important;
            color: var(--nav-text) !important;
        }

        body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li.active > a,
        body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li.active-state > a,
        body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li.open > a,
        body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li > a.active {
            background: var(--nav-active-bg) !important;
            color: var(--nav-active-text) !important;
            border-left: 4px solid var(--nav-active) !important;
        }

/* =========================================================
   Flyout (collapsed sidebar hover) — make the title/header SOLID
   The title is the cloned .item-inner appended directly under .app-aside
========================================================= */

body.ff-app .app-sidebar-closed .app-aside > .item-inner,
body.ff-app #app.app-sidebar-closed .app-aside > .item-inner {
    /* solid blue instead of rgba(--nav-active-bg) */
    background: var(--nav-active) !important;
    background-color: var(--nav-active) !important;
    background-image: none !important;
    border-color: var(--nav-active) !important;
    border-left-color: var(--nav-active) !important;
    opacity: 1 !important;
}

    /* force header text/icons readable on solid blue */
    body.ff-app .app-sidebar-closed .app-aside > .item-inner,
    body.ff-app .app-sidebar-closed .app-aside > .item-inner *,
    body.ff-app #app.app-sidebar-closed .app-aside > .item-inner,
    body.ff-app #app.app-sidebar-closed .app-aside > .item-inner * {
        color: #fff !important;
    }

        /* kill any theme pseudo overlays that can “wash out” the header */
        body.ff-app .app-sidebar-closed .app-aside > .item-inner::before,
        body.ff-app .app-sidebar-closed .app-aside > .item-inner::after,
        body.ff-app #app.app-sidebar-closed .app-aside > .item-inner::before,
        body.ff-app #app.app-sidebar-closed .app-aside > .item-inner::after {
            content: none !important;
            background: none !important;
            border: 0 !important;
        }


/* =========================================================
   1) ICON ALIGNMENT (expanded + collapsed)
   The old look is basically: fixed media box + centered icon + line-height reset
========================================================= */

/* Make the icon box behave consistently */
body.ff-app #sidebar nav .item-content {
    display: flex !important;
    align-items: center !important;
}

body.ff-app #sidebar nav .item-media {
    flex: 0 0 44px !important; /* fixed box */
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    body.ff-app #sidebar nav .item-media i {
        display: block !important;
        line-height: 1 !important; /* kills vertical drift */
        position: static !important; /* beats any legacy top/relative tweaks */
    }

        /* If any legacy CSS added padding to the <i> itself, neutralize it */
        body.ff-app #sidebar nav .item-media i::before {
            line-height: 1 !important;
        }

/* =========================================================
   2) COLLAPSED SIDEBAR (icon-only) — restore old centering
========================================================= */

body.ff-app .app-sidebar-closed #sidebar nav > ul.main-navigation-menu > li > a,
body.ff-app #app.app-sidebar-closed #sidebar nav > ul.main-navigation-menu > li > a {
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important; /* matches the “old” hard edge */
    height: 56px !important; /* old look: equal rows */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    /* Center the icon row content */
    body.ff-app .app-sidebar-closed #sidebar nav > ul.main-navigation-menu > li > a .item-content,
    body.ff-app #app.app-sidebar-closed #sidebar nav > ul.main-navigation-menu > li > a .item-content {
        width: 100% !important;
        justify-content: center !important;
        gap: 0 !important;
    }

    /* Hide text container in collapsed mode (prevents accidental offset) */
    body.ff-app .app-sidebar-closed #sidebar nav > ul.main-navigation-menu > li > a .item-inner,
    body.ff-app #app.app-sidebar-closed #sidebar nav > ul.main-navigation-menu > li > a .item-inner {
        display: none !important;
    }

/* Active icon tile in collapsed mode (solid + obvious) */
body.ff-app .app-sidebar-closed #sidebar nav > ul.main-navigation-menu > li.active > a,
body.ff-app #app.app-sidebar-closed #sidebar nav > ul.main-navigation-menu > li.active > a {
    background: var(--nav-active) !important; /* solid */
    border: 0 !important;
}

    body.ff-app .app-sidebar-closed #sidebar nav > ul.main-navigation-menu > li.active > a .item-media i,
    body.ff-app #app.app-sidebar-closed #sidebar nav > ul.main-navigation-menu > li.active > a .item-media i {
        color: var(--ff-flyout-header-text) !important;
    }

/* =========================================================
   PATCH (paste at END): Ignore Date checkbox + number spinners
========================================================= */

/* 1) Make native controls follow the CURRENT theme (fixes dark grey spinners/checkboxes) */
body.ff-app {
    color-scheme: light !important;
}

    body.ff-app[data-theme="dark"] {
        color-scheme: dark !important;
    }

    /* 2) Date filter addon surface (stops the addon from looking like a legacy grey block) */
    body.ff-app .input-group-addon.input-group-addon-grey.input-group-addon-less-padding {
        background: var(--surface) !important;
        color: var(--text) !important;
        border-color: var(--border) !important;
        min-width: 0 !important;
        padding: 0 !important;
    }

    /* 3) "Ignore" checkbox (id="ignoreDate") — styled without changing HTML */
    body.ff-app #ignoreDate {
        /* visually hide native checkbox but keep it accessible */
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

        body.ff-app #ignoreDate + label {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            margin: 0 !important;
            min-height: 32px !important;
            height: 32px !important;
            padding: 0 8px 0 28px !important;
            border-radius: var(--radius-sm) !important;
            cursor: pointer !important;
            position: relative !important;
            user-select: none !important;
            color: var(--text) !important;
            white-space: nowrap !important;
        }

            /* box */
            body.ff-app #ignoreDate + label::before {
                content: "" !important;
                width: 16px !important;
                height: 16px !important;
                border-radius: 4px !important;
                border: 1px solid var(--border) !important;
                background: var(--surface) !important;
                box-shadow: none !important;
                left: 8px !important;
                position: absolute !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
            }

            /* checkmark */
            body.ff-app #ignoreDate + label::after {
                content: "" !important;
                width: 8px !important;
                height: 4px !important;
                border-left: 2px solid transparent !important;
                border-bottom: 2px solid transparent !important;
                left: 12px !important;
                position: absolute !important;
                top: 50% !important;
                transform: translateY(-70%) rotate(-45deg) !important;
            }

        /* checked state */
        body.ff-app #ignoreDate:checked + label::before {
            background: var(--primary) !important;
            border-color: var(--primary) !important;
        }

        body.ff-app #ignoreDate:checked + label::after {
            border-left-color: var(--on-primary) !important;
            border-bottom-color: var(--on-primary) !important;
        }

        /* hover/focus */
        body.ff-app #ignoreDate + label:hover {
            background: var(--surface-2) !important;
        }

        body.ff-app #ignoreDate:focus-visible + label::before {
            border-color: var(--primary) !important;
            box-shadow: 0 0 0 3px var(--focus) !important;
        }

    /* Date Period filter: keep the Ignore segment and period select on the same baseline. */
    body.ff-app .input-group:has(> .input-group-addon.input-group-addon-grey.input-group-addon-less-padding + select.form-control) {
        display: flex !important;
        align-items: stretch !important;
        width: 100%;
        max-width: 230px;
    }

        body.ff-app .input-group:has(> .input-group-addon.input-group-addon-grey.input-group-addon-less-padding + select.form-control) > .input-group-addon.input-group-addon-grey.input-group-addon-less-padding {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex: 0 0 76px;
            width: 76px !important;
            min-width: 76px !important;
            height: 34px !important;
            min-height: 34px !important;
            box-sizing: border-box !important;
            line-height: 1 !important;
            vertical-align: middle !important;
        }

            body.ff-app .input-group:has(> .input-group-addon.input-group-addon-grey.input-group-addon-less-padding + select.form-control) > .input-group-addon.input-group-addon-grey.input-group-addon-less-padding #ignoreDate + label {
                width: 100% !important;
                min-width: 100% !important;
            }

        body.ff-app .input-group:has(> .input-group-addon.input-group-addon-grey.input-group-addon-less-padding + select.form-control) > select.form-control {
            flex: 1 1 auto;
            width: auto !important;
            min-width: 0;
            height: 34px !important;
            min-height: 34px !important;
            line-height: 20px !important;
            padding-top: 5px !important;
            padding-bottom: 5px !important;
        }

    /* Compact reusable filter panels: keep filter controls and grid toolbars dense. */
    body.ff-app .ff-filter-panel fieldset {
        padding-bottom: 8px !important;
    }

        body.ff-app .ff-filter-panel fieldset > .row {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: 6px 10px;
            margin-left: 0;
            margin-right: 0;
            margin-bottom: 6px;
        }

            body.ff-app .ff-filter-panel fieldset > .row::before,
            body.ff-app .ff-filter-panel fieldset > .row::after {
                content: none;
                display: none;
            }

            body.ff-app .ff-filter-panel fieldset > .row > [class*="col-"] {
                float: none;
                min-width: 0;
                padding-left: 0;
                padding-right: 0;
                width: auto;
            }

            body.ff-app .ff-filter-panel fieldset > .row > .col-md-1 {
                flex: 0 1 82px;
            }

            body.ff-app .ff-filter-panel fieldset > .row > .col-md-2 {
                flex: 0 1 165px;
            }

            body.ff-app .ff-filter-panel fieldset > .row > .col-md-3 {
                flex: 0 1 220px;
            }

            body.ff-app .ff-filter-panel fieldset > .row > .col-md-4 {
                flex: 1 1 275px;
            }

            body.ff-app .ff-filter-panel fieldset > .row > .col-md-8 {
                flex: 2 1 520px;
            }

            body.ff-app .ff-filter-panel fieldset > .row > .col-md-12 {
                flex: 1 1 100%;
            }

        body.ff-app .ff-filter-panel textarea.form-control,
        body.ff-app .ff-filter-panel textarea.autoExpand,
        body.ff-app .ff-page fieldset:has(input[ng-model="filtermodel.KeepFilterOpen"]) textarea.form-control,
        body.ff-app .ff-page fieldset:has(input[ng-model="filtermodel.KeepFilterOpen"]) textarea.autoExpand,
        body.ff-app .ff-page .accordion-no-display fieldset textarea.form-control,
        body.ff-app .ff-page .accordion-no-display fieldset textarea.autoExpand {
            height: var(--ff-control-h) !important;
            min-height: var(--ff-control-h) !important;
            max-height: var(--ff-control-h) !important;
            overflow-y: auto;
            resize: none;
        }

        body.ff-app .ff-filter-panel .ff-filter-final-row {
            align-items: flex-end;
            margin-bottom: 0;
        }

            body.ff-app .ff-filter-panel .ff-filter-final-row > .ff-filter-area-from,
            body.ff-app .ff-filter-panel .ff-filter-final-row > .ff-filter-area-to {
                flex: 0 1 145px;
            }

            body.ff-app .ff-filter-panel .ff-filter-final-row > .ff-filter-footer-actions {
                flex: 1 1 360px;
            }

        body.ff-app .ff-filter-panel .ff-filter-footer-actions-inner {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            min-height: var(--ff-control-h);
        }

            body.ff-app .ff-filter-panel .ff-filter-footer-actions-inner .checkbox,
            body.ff-app .ff-filter-panel .ff-filter-footer-actions-inner .btn {
                margin: 0 !important;
            }

    body.ff-app .ff-grid-toolbar-row {
        margin-top: 0;
        margin-bottom: 4px;
    }

    body.ff-app .ff-grid-toolbar {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px 10px;
    }

        body.ff-app .ff-grid-toolbar > .label,
        body.ff-app .ff-grid-toolbar > .badge,
        body.ff-app .ff-grid-toolbar > .valuesonly,
        body.ff-app .ff-grid-toolbar > .checkbox-inline {
            margin: 0 !important;
        }

    body.ff-app .ff-page fieldset > .row:has(input[ng-model="filtermodel.KeepFilterOpen"]) {
        margin-top: 0;
        margin-bottom: 0;
    }

        body.ff-app .ff-page fieldset > .row:has(input[ng-model="filtermodel.KeepFilterOpen"]) > .col-md-12 {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: 8px 10px;
            min-height: var(--ff-control-h);
            padding-left: 0;
            padding-right: 0;
        }

        body.ff-app .ff-page fieldset > .row:has(input[ng-model="filtermodel.KeepFilterOpen"]) .pull-right {
            float: none !important;
        }

        body.ff-app .ff-page fieldset > .row:has(input[ng-model="filtermodel.KeepFilterOpen"]) .checkbox,
        body.ff-app .ff-page fieldset > .row:has(input[ng-model="filtermodel.KeepFilterOpen"]) .btn {
            margin: 0 !important;
        }

    /* Tariff filters: keep Effective Date compact and stop it overlapping the Ignore checkbox. */
    body.ff-app .ff-tariff-effective-date {
        width: 235px !important;
        min-width: 235px;
        max-width: 235px;
    }

        body.ff-app .ff-tariff-effective-date .ff-tariff-date-group {
            display: flex !important;
            align-items: stretch !important;
            width: 204px !important;
            max-width: 100% !important;
            min-width: 0 !important;
        }

            body.ff-app .ff-tariff-effective-date .ff-tariff-date-group > .input-group-addon {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                flex: 0 0 76px !important;
                width: 76px !important;
                min-width: 76px !important;
                height: 34px !important;
                min-height: 34px !important;
                border-top-right-radius: 0 !important;
                border-bottom-right-radius: 0 !important;
                box-sizing: border-box !important;
            }

            body.ff-app .ff-tariff-effective-date .ff-tariff-date-group > .ff-tariff-date-icon {
                flex: 0 0 127px !important;
                width: 127px !important;
                min-width: 0 !important;
                max-width: 127px !important;
                display: block !important;
                margin-left: 1px !important;
            }

    body.ff-app #filterIgnoreDate {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

        body.ff-app #filterIgnoreDate + label {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            width: 100% !important;
            min-height: 32px !important;
            height: 32px !important;
            margin: 0 !important;
            padding: 0 6px 0 28px !important;
            border-radius: var(--radius-sm) !important;
            cursor: pointer !important;
            position: relative !important;
            user-select: none !important;
            color: var(--text) !important;
            white-space: nowrap !important;
        }

            body.ff-app #filterIgnoreDate + label::before {
                content: "" !important;
                width: 16px !important;
                height: 16px !important;
                border-radius: 4px !important;
                border: 1px solid var(--border) !important;
                background: var(--surface) !important;
                left: 8px !important;
                position: absolute !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
            }

            body.ff-app #filterIgnoreDate + label::after {
                content: "" !important;
                width: 8px !important;
                height: 4px !important;
                border-left: 2px solid transparent !important;
                border-bottom: 2px solid transparent !important;
                left: 12px !important;
                position: absolute !important;
                top: 50% !important;
                transform: translateY(-70%) rotate(-45deg) !important;
            }

        body.ff-app #filterIgnoreDate:checked + label::before {
            background: var(--primary) !important;
            border-color: var(--primary) !important;
        }

        body.ff-app #filterIgnoreDate:checked + label::after {
            border-left-color: var(--on-primary) !important;
            border-bottom-color: var(--on-primary) !important;
        }

    body.ff-app .ff-tariff-effective-date .ff-tariff-date-icon > input.form-control[uib-datepicker-popup] {
        width: 127px !important;
        min-width: 0 !important;
        max-width: 127px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding-left: 24px !important;
        padding-right: 6px !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        box-sizing: border-box !important;
        cursor: pointer;
    }

    body.ff-app .ff-tariff-effective-date .ff-tariff-date-icon > i.ti-calendar {
        left: 5px !important;
        top: 0 !important;
        line-height: 34px !important;
        pointer-events: none;
    }

    /* 4) Native number input spinner arrows (Waybill ID / Quote ID) */
    body.ff-app input[type="number"]::-webkit-inner-spin-button,
    body.ff-app input[type="number"]::-webkit-outer-spin-button {
        opacity: 0.65 !important;
    }

    body.ff-app[data-theme="dark"] input[type="number"]::-webkit-inner-spin-button,
    body.ff-app[data-theme="dark"] input[type="number"]::-webkit-outer-spin-button {
        opacity: 0.9 !important;
        filter: invert(1) brightness(1.15) !important; /* makes the arrows readable on dark surfaces */
    }


/* =========================================================
   FINAL: HISTORY TABS — STUCK TO TOP BAR (true fixed)
   - Does NOT push layout
   - Stays put while you scroll
   - No margin calcs
========================================================= */

/* Wrapper must NOT take up layout space (and must NOT be fixed) */
html body.ff-app .ff-shell div[ng-include*="partials/tab-bar.html"] {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 9999 !important;
}

/* Keep vars here (single source of truth) */
html body.ff-app {
    --ff-history-top: 6px;
    --ff-history-left-collapsed: 80px;
    --ff-history-left-open: 260px;
}

    /* The pill: MUST be fixed */
    html body.ff-app #historyTabs {
        overflow-x: auto;
          height: 43px;
        position: fixed !important;
        top: var(--ff-history-top) !important;
        left: var(--ff-history-left-collapsed) !important;
        right: 12px !important;
        z-index: 9999 !important; /* you said required */
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: auto !important;
        /* defensive: helps some GPU/compositing edge cases */
        transform: translateZ(0) !important;
    }

    html body.ff-app #app:not(.app-sidebar-closed) #historyTabs {
        left: var(--ff-history-left-open) !important;
    }

    html body.ff-app #app.app-sidebar-closed #historyTabs {
        left: var(--ff-history-left-collapsed) !important;
    }

@media (max-width: 992px) {
    html body.ff-app #historyTabs {
        left: 8px !important;
        right: 8px !important;
    }
}

/* =========================================================
   CRITICAL: "fixed scrolling" happens when an ancestor has transform/filter.
   Neutralize on common ClipTwo wrappers (targeted but stronger coverage).
   If you notice any side effects, keep only the selector that was transformed.
========================================================= */
/*html body.ff-app #app,
html body.ff-app .app-content,
html body.ff-app .main-content,
html body.ff-app .wrap-content,
html body.ff-app .container-fluid,
html body.ff-app .page-container,
html body.ff-app .app-aside {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
}*/


/* =========================================================
   TOPBAR BANNER — "Apple-ish" frosted aurora (LIGHT + DARK)
   - darker in light mode
   - separate, tuned dark mode
   - seed-driven via color-mix()
========================================================= */

/* ---------- LIGHT THEME (default) ---------- */
body.ff-app {
    --ff-banner-seed: var(--primary);
    /* Darker, richer base in light mode */
    --ff-base-a: color-mix(in srgb, var(--ff-banner-seed) 70%, #07101f 30%);
    --ff-base-b: color-mix(in srgb, var(--ff-banner-seed) 82%, #ffffff 18%);
    /* Aurora colors */
    --ff-aurora-a: color-mix(in srgb, var(--ff-banner-seed) 72%, #ffffff 28%);
    --ff-aurora-b: color-mix(in srgb, var(--ff-banner-seed) 55%, #9bd6ff 45%);
    --ff-aurora-c: color-mix(in srgb, var(--ff-banner-seed) 45%, #c7b8ff 55%);
}

    /* Apply banner */
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg,
    body.ff-app .ff-shell .ff-topnav .ff-topnav-bg {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        -webkit-transform: translateZ(0);
        background-color: var(--ff-base-a) !important;
        background-image:
        /* 1) sheen */
        linear-gradient(to bottom, rgba(255,255,255,0.14), rgba(255,255,255,0.00) 55%),
        /* 2) aurora band (a touch more contrast) */
        radial-gradient(140% 120% at 18% 35%, color-mix(in srgb, var(--ff-aurora-b) 60%, transparent) 0 45%, transparent 68%), radial-gradient(120% 110% at 55% 18%, color-mix(in srgb, var(--ff-aurora-c) 52%, transparent) 0 42%, transparent 68%), radial-gradient(140% 120% at 88% 40%, color-mix(in srgb, var(--ff-aurora-a) 48%, transparent) 0 44%, transparent 72%),
        /* 3) micro grain */
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 0 1px, transparent 1.2px),
        /* 4) base */
        linear-gradient(90deg, var(--ff-base-a), var(--ff-base-b)) !important;
        background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat !important;
        background-size: cover, cover, cover, cover, 18px 18px, cover !important;
        background-position: center, center, center, center, 0 0, center !important;
        /*position: relative;*/
    }

        /* Depth overlay */
        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg::before,
        body.ff-app .ff-shell .ff-topnav .ff-topnav-bg::before {
            content: "" !important;
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(to bottom, rgba(0,0,0,0.12), rgba(0,0,0,0.26));
        }

        /* Keep content above overlays */
        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg > *,
        body.ff-app .ff-shell .ff-topnav .ff-topnav-bg > * {
            position: relative;
            z-index: 1;
        }

    /* ---------- DARK THEME (tuned separately) ---------- */
    body.ff-app[data-theme="dark"] {
        --ff-banner-seed: var(--primary);
        /* Much darker base, less “milky” */
        --ff-base-a: color-mix(in srgb, var(--ff-banner-seed) 38%, #05070c 62%);
        --ff-base-b: color-mix(in srgb, var(--ff-banner-seed) 46%, #0b1220 54%);
        /* Aurora shifts slightly cooler + less bright */
        --ff-aurora-a: color-mix(in srgb, var(--ff-banner-seed) 46%, #6aa8ff 54%);
        --ff-aurora-b: color-mix(in srgb, var(--ff-banner-seed) 40%, #5fb8ff 60%);
        --ff-aurora-c: color-mix(in srgb, var(--ff-banner-seed) 34%, #9b86ff 66%);
    }

        body.ff-app[data-theme="dark"] .ff-shell .navbar-collapse.ff-topnav-bg,
        body.ff-app[data-theme="dark"] .ff-shell .ff-topnav .ff-topnav-bg {
            background-color: var(--ff-base-a) !important;
            background-image:
            /* subtle sheen (dimmer in dark mode) */
            linear-gradient(to bottom, rgba(255,255,255,0.08), rgba(255,255,255,0.00) 60%),
            /* aurora band (lower intensity, still visible) */
            radial-gradient(140% 120% at 18% 35%, color-mix(in srgb, var(--ff-aurora-b) 38%, transparent) 0 46%, transparent 72%), radial-gradient(120% 110% at 55% 18%, color-mix(in srgb, var(--ff-aurora-c) 34%, transparent) 0 44%, transparent 74%), radial-gradient(140% 120% at 88% 40%, color-mix(in srgb, var(--ff-aurora-a) 32%, transparent) 0 44%, transparent 76%),
            /* grain (even quieter) */
            radial-gradient(circle at 1px 1px, rgba(255,255,255,0.035) 0 1px, transparent 1.2px),
            /* base */
            linear-gradient(90deg, var(--ff-base-a), var(--ff-base-b)) !important;
            background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat !important;
            background-size: cover, cover, cover, cover, 20px 20px, cover !important;
            background-position: center, center, center, center, 0 0, center !important;
        }

            /* Dark mode depth overlay (stronger, cleaner) */
            body.ff-app[data-theme="dark"] .ff-shell .navbar-collapse.ff-topnav-bg::before,
            body.ff-app[data-theme="dark"] .ff-shell .ff-topnav .ff-topnav-bg::before {
                background: linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(0,0,0,0.40));
            }




    /* LOGIN LOGO: skeleton + fade-in (prevents bland alt-text flash) */
    body.ff-app .ff-login .ff-logo {
        opacity: 0;
        transition: opacity .18s ease;
    }

    /* reserve space so layout doesn't jump */
    body.ff-app .ff-login .login-header {
        min-height: 120px; /* set to your logo height */
    }

        /* lightweight skeleton behind logo while loading */
        body.ff-app .ff-login .login-header::before {
            content: "";
            display: block;
            width: 400px; /* match your .login-banner width */
            max-width: 100%;
            height: 120px; /* match your logo area */
            border-radius: var(--radius-md);
            background: linear-gradient(90deg, color-mix(in srgb, var(--surface-2) 70%, transparent) 0%, color-mix(in srgb, var(--surface-3) 70%, transparent) 35%, color-mix(in srgb, var(--surface-2) 70%, transparent) 70% );
            background-size: 220% 100%;
            animation: ff-shimmer 1.1s linear infinite;
        }

    /* once logo loads, show it and hide skeleton */
    body.ff-app .ff-login .ff-logo.is-loaded {
        opacity: 1;
    }

    body.ff-app .ff-login .login-header:has(.ff-logo.is-loaded)::before {
        display: none;
    }

/* no motion users */
@media (prefers-reduced-motion: reduce) {
    body.ff-app .ff-login .login-header::before {
        animation: none;
    }
}

@keyframes ff-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -20% 0;
    }
}


/* =========================
   FF "Clean UI" layer (TOKENIZED)
   Drop-in replacement for your "Clean UI" CSS
   Load AFTER bootstrap + existing ff css
   ========================= */

/* No new top-level tokens required: this layer binds to your existing ones. */
body.ff-app {
    /* Bind "Clean UI" vars to your tokens */
    --ff-bg: var(--bg);
    --ff-surface: var(--surface);
    --ff-surface-2: var(--surface-2);
    --ff-border: var(--border);
    --ff-text: var(--text);
    --ff-muted: var(--text-muted);
    --ff-primary: var(--primary);
    --ff-primary-600: var(--primary-active);
    --ff-danger: var(--error);
    --ff-success: var(--success);
    --ff-warning: var(--warning);
    --ff-radius: var(--radius-md);
    --ff-radius-sm: var(--radius-sm);
    --ff-shadow: var(--shadow-1);
    --ff-shadow-sm: var(--shadow-1);
    --ff-focus-ring: var(--focus);
    --ff-hover-surface: var(--surface-2);
    /* Table header (uses nav surfaces so it looks right in light & dark) */
    --ff-table-head-bg: var(--nav-bg-2);
    --ff-table-head-text: var(--nav-text);
    /* Keep your original non-color design tokens */
    --ff-gap-1: 6px;
    --ff-gap-2: 10px;
    --ff-gap-3: 14px;
    --ff-gap-4: 18px;
    --ff-gap-5: 24px;
    --ff-control-h: 40px;
    --ff-font: "Inter var", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-family: var(--ff-font);
    background: var(--ff-bg);
    color: var(--ff-text);
}

/* Make the main content breathe */
#container.wrap-content.container {
    width: 100%;
    max-width: 1600px; /* adjust */
    /* padding: var(--ff-gap-5); */
}

/* Reduce “everything touches everything” feeling */
.row {
    margin-bottom: var(--ff-gap-3);
}

    .row:last-child {
        margin-bottom: 0;
    }

/* Fieldsets become clean cards */
.ff-form fieldset,
fieldset {
    background: var(--ff-surface);
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radius);
    padding: var(--ff-gap-5);
    box-shadow: var(--ff-shadow-sm);
}

    /* Better legend */
    .ff-form legend,
    fieldset legend {
        width: auto;
        padding: 0 var(--ff-gap-2);
        margin: 0 0 var(--ff-gap-4) 0;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--ff-muted);
        border: none;
    }

/* Standard form control look */
.form-control,
.ff-input {
    height: var(--ff-control-h);
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radius-sm);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    background-color: var(--ff-surface);
    color: var(--ff-text);
}

    .form-control:focus,
    .ff-input:focus {
        border-color: var(--ff-primary);
        box-shadow: 0 0 0 4px var(--ff-focus-ring);
        outline: none;
    }

/* Labels less shouty, more consistent */
.form-group > label {
    font-size: 12px;
    font-weight: 650;
    color: var(--ff-muted);
    margin-bottom: 6px;
}

/* Compact default rhythm for portal form pages. Page-specific rules can tighten further. */
body.ff-app .ff-page {
    --ff-control-h: 34px;
}

body.ff-app .ff-page:not(.ff-login) {
    font-size: var(--ff-page-font-size, 12px);
}

body.ff-app .ff-page:not(.ff-login) .form-control,
body.ff-app .ff-page:not(.ff-login) .ff-input,
body.ff-app .ff-page:not(.ff-login) .btn,
body.ff-app .ff-page:not(.ff-login) label,
body.ff-app .ff-page:not(.ff-login) .control-label,
body.ff-app .ff-page:not(.ff-login) .checkbox,
body.ff-app .ff-page:not(.ff-login) .radio,
body.ff-app .ff-page:not(.ff-login) .ui-select-container,
body.ff-app .ff-page:not(.ff-login) .ui-select-container .btn,
body.ff-app .ff-page:not(.ff-login) .ui-select-container .ui-select-match-text,
body.ff-app .ff-page:not(.ff-login) .ui-select-container .ui-select-placeholder,
body.ff-app .ff-page:not(.ff-login) .ui-select-container .ui-select-search,
body.ff-app .ff-page:not(.ff-login) .dx-widget,
body.ff-app .ff-page:not(.ff-login) .dx-texteditor-input {
    font-size: var(--ff-control-font-size, 12px);
}

body.ff-app .ff-page .form-group {
    margin-bottom: 4px;
}

body.ff-app .ff-page .form-group > label {
    margin-bottom: 2px;
    line-height: 1.2;
}

body.ff-app .ff-page textarea.form-control,
body.ff-app .ff-page textarea.ff-input {
    height: auto;
    min-height: 68px;
}

body.ff-app .ff-page fieldset {
    padding: 8px 12px 10px !important;
    margin-bottom: 8px !important;
}

body.ff-app:not([data-theme="dark"]) .ff-page fieldset:has([ng-model^="filtermodel."]),
body.ff-app:not([data-theme="dark"]) .ff-filter-panel fieldset {
    background: var(--surface-2) !important;
}

body.ff-app .ff-page fieldset > legend {
    padding: 4px 8px !important;
    margin-bottom: 4px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
}

body.ff-app .ff-page .row {
    margin-bottom: 4px;
}

body.ff-app .ff-page .row:last-child {
    margin-bottom: 0;
}

body.ff-app .ff-page .panel-body,
body.ff-app .ff-page .panel-body .form-group {
    margin-bottom: 4px;
}

body.ff-app .ff-page .row.padding-10 {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

body.ff-app .ff-page .row.padding-bottom-30,
body.ff-app .ff-page .padding-bottom-30 {
    padding-bottom: 12px !important;
}

body.ff-app .ff-page .row.padding-bottom-20,
body.ff-app .ff-page .padding-bottom-20 {
    padding-bottom: 8px !important;
}

body.ff-app .ff-page .padding-top-30 {
    padding-top: 12px !important;
}

body.ff-app .ff-page .padding-top-20 {
    padding-top: 8px !important;
}

body.ff-app .ff-page .checkbox.clip-check,
body.ff-app .ff-page .radio.clip-radio {
    margin-top: 2px;
    margin-bottom: 2px;
}

body.ff-app .clip-check label:after {
    left: 3px !important;
    top: 1px !important;
    line-height: 20px !important;
    text-align: center;
}

body.ff-app .clip-check.check-sm label:after {
    left: 1px !important;
    top: 4px !important;
    line-height: 14px !important;
}

body.ff-app .clip-check.check-md label:after {
    left: 4px !important;
    top: 1px !important;
    line-height: 25px !important;
}

body.ff-app .clip-check.check-lg label:after {
    left: 5px !important;
    top: 1px !important;
    line-height: 30px !important;
}

body.ff-app .ff-page .table.table-condensed > thead > tr > th,
body.ff-app .ff-page .table.table-condensed > thead > tr > td,
body.ff-app .ff-page table.custom-dx-table:not(.ff-parcel-grid) > thead > tr > th,
body.ff-app .ff-page table.custom-dx-table:not(.ff-parcel-grid) > thead > tr > td {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    line-height: 1.2 !important;
}

body.ff-app .ff-page .table.table-condensed > tbody > tr > th,
body.ff-app .ff-page .table.table-condensed > tbody > tr > td,
body.ff-app .ff-page table.custom-dx-table:not(.ff-parcel-grid) > tbody > tr > th,
body.ff-app .ff-page table.custom-dx-table:not(.ff-parcel-grid) > tbody > tr > td {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    line-height: 1.25 !important;
}

body.ff-app .ff-page .table.table-condensed > tfoot > tr > th,
body.ff-app .ff-page .table.table-condensed > tfoot > tr > td,
body.ff-app .ff-page table.custom-dx-table:not(.ff-parcel-grid) > tfoot > tr > th,
body.ff-app .ff-page table.custom-dx-table:not(.ff-parcel-grid) > tfoot > tr > td {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    line-height: 1.2 !important;
}

body.ff-app .ff-page .dx-datagrid-headers .dx-header-row > td,
body.ff-app .ff-page .dx-datagrid-rowsview .dx-row > td,
body.ff-app .ff-page .dx-datagrid-total-footer .dx-row > td {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    line-height: 1.2 !important;
}

body.ff-app .ff-page .dx-datagrid .dx-row {
    min-height: var(--ff-grid-row-height);
}

body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid-headers .dx-header-row > td,
body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid-rowsview .dx-row > td,
body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid-total-footer .dx-row > td {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.15 !important;
}

body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid .dx-row {
    min-height: var(--ff-grid-row-height) !important;
}

/* ui-select (Bootstrap theme) - match height */
.ui-select-container .btn.form-control.ui-select-toggle,
.ui-select-container .btn.form-control {
    height: var(--ff-control-h);
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radius-sm);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 12px;
    box-shadow: none;
    background: var(--ff-surface);
    color: var(--ff-text);
    text-align: left;
}

body.ff-app .ff-page:not(.ff-login) .ui-select-bootstrap > .ui-select-match > .ui-select-toggle,
body.ff-app .ff-page:not(.ff-login) .ui-select-bootstrap > .ui-select-match > .btn {
    justify-content: flex-start !important;
    text-align: left !important;
}

body.ff-app .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-match-text span {
    display: block !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    min-width: 0 !important;
    text-align: left !important;
}

body.ff-app .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-match-text {
    flex: 1 1 auto !important;
    overflow: hidden !important;
}

body.ff-app .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-placeholder {
    display: none !important;
    flex: 0 0 0 !important;
    margin: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
}

/* Placeholder color */
.ui-select-placeholder,
.form-control::placeholder {
    color: var(--ff-muted);
    opacity: .75;
}

/* Validation states */
.has-error .form-control {
    border-color: var(--ff-danger);
}

.has-success .form-control {
    border-color: var(--ff-success);
}

.has-warning .form-control {
    border-color: var(--ff-warning);
}

.has-error .error,
.has-error .help-block {
    color: var(--ff-danger);
}

.has-success .help-block {
    color: var(--ff-success);
}

.has-warning .help-block {
    color: var(--ff-warning);
}

.ff-toolbar {
    display: flex;
    gap: var(--ff-gap-2);
    align-items: center;
}

.ff-action {
    height: 42px;
    border-radius: 999px;
    border: 1px solid var(--ff-border);
    background: var(--ff-surface);
    padding: 0 14px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    color: var(--ff-text);
    box-shadow: none;
    transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}

    .ff-action:hover {
        border-color: var(--ps-thumb); /* already a theme-aware alpha color */
        background: var(--ff-hover-surface);
        box-shadow: var(--ff-shadow-sm);
        transform: translateY(-1px);
    }

.ff-action-primary {
    background: var(--ff-primary);
    border-color: var(--ff-primary);
    color: var(--on-primary);
}

    .ff-action-primary:hover {
        background: var(--primary-hover);
        border-color: var(--primary-hover);
    }

.ff-action .ff-action-label {
    font-weight: 650;
    font-size: 12px;
}

.ff-historybar-wrap {
    background: transparent;
    padding: 8px 0;
}

#historyTabs .nav.nav-tabs {
    border-bottom: 0;
    display: flex;
    gap: 8px;
    padding: 0 10px;
}

    #historyTabs .nav.nav-tabs > li > a {
        border: 1px solid var(--ff-border);
        border-radius: 999px;
        background: var(--ff-surface);
        color: var(--ff-text);
        padding: 8px 12px;
        line-height: 1;
    }

        #historyTabs .nav.nav-tabs > li.active > a,
        #historyTabs .nav.nav-tabs > li > a:hover {
            border-color: var(--ff-primary);
            box-shadow: 0 0 0 4px var(--ff-focus-ring);
        }

.tab-close i {
    opacity: .7;
}

    .tab-close i:hover {
        opacity: 1;
    }



/* Make the + button look like an action */
#addNewParcel.btn {
    height: 34px;
    width: 34px;
    border-radius: 999px;
    background: var(--ff-primary);
    border-color: var(--ff-primary);
    color: var(--on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ff-shadow-sm);
}

    #addNewParcel.btn:hover {
        background: var(--primary-hover);
        border-color: var(--primary-hover);
    }


/* =========
   Theme tokens (light defaults)
   ========= */
:root {
    --ff-topbar-bg: #ffffff;
    --ff-topbar-border: rgba(0, 0, 0, 0.08);
    --ff-topbar-fg: rgba(0, 0, 0, 0.86);
    --ff-topbar-muted: rgba(0, 0, 0, 0.55);
    --ff-topbar-hover: rgba(0, 0, 0, 0.05);
    --ff-topbar-icon-bg: rgba(0, 0, 0, 0.06);
}

/* Try common dark-mode roots (keep whichever matches your app) */
body.dark,
body.dark-mode,
.theme-dark,
.layout-dark,
html[data-theme="dark"] {
    --ff-topbar-bg: rgba(255, 255, 255, 0.03);
    --ff-topbar-border: rgba(255, 255, 255, 0.10);
    --ff-topbar-fg: rgba(255, 255, 255, 0.92);
    --ff-topbar-muted: rgba(255, 255, 255, 0.62);
    --ff-topbar-hover: rgba(255, 255, 255, 0.06);
    --ff-topbar-icon-bg: rgba(255, 255, 255, 0.08);
}

/* =========
   OPTIONAL: Make the entire top bar section go edge-to-edge (viewport)
   If you only want "to the edges of the container", remove this block.
   ========= */
/*#page-title.ff-topbar-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}*/
#page-title h1 {
    padding: 0 16px;
}
/* Kill the Bootstrap row/col gutters for the top bar so the background truly fills */
#page-title.ff-topbar-bleed > .row {
    margin-left: 0;
    margin-right: 0;
}

        #page-title.ff-topbar-bleed > .row > .col-md-12 {
            padding-left: 0;
            padding-right: 0;
        }

/* =========
   Top bar container
   ========= */
.ff-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* NEW: allow the row to wrap instead of forcing overflow */
    flex-wrap: wrap;
    gap: 12px;
    /* keep your styling */
    background: var(--ff-topbar-bg);
    border: 1px solid var(--ff-topbar-border);
    /* NEW: don't let borders/padding push it wider than the container */
    max-width: 100%;
    box-sizing: border-box;
}


/* Make sure the card doesn't “clip” weirdly in dark mode */
.ff-card {
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* =========
   Title styling: fixes “background space” feeling by giving the BAR padding,
   and keeping title clean and aligned.
   ========= */
.ff-topbar-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--ff-topbar-fg);
}

    .ff-topbar-title sup {
        top: 0; /* stop weird vertical offset */
    }

    .ff-topbar-title .unfavourite-page {
        /* Your fa-3x was making the header feel cramped and messy */
        font-size: 16px !important;
        opacity: 0.85;
    }

        .ff-topbar-title .unfavourite-page:hover {
            opacity: 1;
        }

/* =========
   Right-side actions: remove clunky stacked layout,
   convert to consistent “icon button” controls.
   ========= */
.ff-topbar-actions {
    /* override old float-based layout */
    float: none !important;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    /* Remove the awkward per-li top padding that makes them look misaligned */
    .ff-topbar-actions > li {
        padding-top: 0 !important;
        margin: 0 !important;
    }

/* The clickable control */
.ff-topbar-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    min-width: 36px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px solid var(--ff-topbar-border);
    background: transparent;
    color: var(--ff-topbar-fg) !important; /* fixes dark mode + kills the old inline #333 issue */
    text-decoration: none !important;
    transition: background 120ms ease, transform 120ms ease, border-color 120ms ease;
}

    .ff-topbar-action:hover {
        background: var(--ff-topbar-hover);
        transform: translateY(-1px);
    }



    /* Icon container becomes a clean “icon chip” */
    .ff-topbar-action .sparkline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: var(--ff-topbar-icon-bg);
    }

        /* Your icons were huge (text30). This makes them feel like real header controls. */
        .ff-topbar-action .sparkline i {
            font-size: 18px !important;
            line-height: 1 !important;
        }

    /* Dropdown caret: keep, but don’t let it distort layout */
    .ff-topbar-action .caret {
        margin-left: 6px;
        opacity: 0.75;
    }

/* Make dropdown toggle behave like the other actions */
.btn-group.dropdown .dropdown-toggle.ff-topbar-action {
    cursor: pointer;
}



/* =========================
   Topbar actions: normalize ALL action controls
   Works for <a.ff-action> and dropdown toggles from ng-include
   ========================= */

/* Keep the UL itself consistent (kills bootstrap pull-right/panel-heading-tabs quirks) */
.ff-topbar-actions {
    float: none !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;

    /* allow wrap on smaller widths */
    flex-wrap: wrap;
    max-width: 100%;
}

/* Remove per-li padding/margins that make items misalign */
.ff-topbar-actions > li {
    padding-top: 0 !important;
    margin: 0 !important;
    display: flex;          /* keeps include/dropdown aligned */
    align-items: center;
}

/* ---- The unified “action button” target ----
   1) your anchors: a.ff-action
   2) dropdown toggles inside the include: .dropdown-toggle / button / a
*/
    .ff-topbar-actions > li > a.ff-action,
    .ff-topbar-actions > li > button.ff-action,
    .ff-topbar-actions .btn-group > .dropdown-toggle,
    .ff-topbar-actions .dropdown > .dropdown-toggle,
    .ff-topbar-actions button.dropdown-toggle,
    .ff-topbar-actions a.dropdown-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 42px;
        min-width: 42px;
        padding: 0 10px;
        border-radius: 12px;
        border: 1px solid var(--ff-topbar-border);
        background: transparent;
        color: var(--ff-topbar-fg) !important;
        text-decoration: none !important;
        line-height: 1 !important;
        transition: background 120ms ease, transform 120ms ease, border-color 120ms ease;
    }

        .ff-topbar-actions > li > a.ff-action:hover,
        .ff-topbar-actions > li > button.ff-action:hover,
        .ff-topbar-actions .btn-group > .dropdown-toggle:hover,
        .ff-topbar-actions .dropdown > .dropdown-toggle:hover,
        .ff-topbar-actions button.dropdown-toggle:hover,
        .ff-topbar-actions a.dropdown-toggle:hover {
            background: var(--ff-topbar-hover);
            transform: translateY(-1px);
        }

/* Make sparkline (icon chip) consistent for both your anchors + include */
.ff-topbar-actions .sparkline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--ff-topbar-icon-bg);
}

/* Your icons are huge because of text30 — normalize only inside the topbar */
.ff-topbar-actions .sparkline i,
.ff-topbar-actions i.text30 {
    font-size: 18px !important;
    line-height: 1 !important;
}

/* Caret: keep but prevent layout distortion */
.ff-topbar-actions .caret {
    margin-left: 6px;
    opacity: 0.75;
}

/* Ensure btn-group wrapper doesn’t add spacing/line-height weirdness */
.ff-topbar-actions .btn-group,
.ff-topbar-actions .dropdown {
    display: flex;
    align-items: center;
}

/* OPTIONAL: make dropdown menus visually consistent (only if you want) */
.ff-topbar-actions .dropdown-menu {
    border-radius: 12px;
    border: 1px solid var(--ff-topbar-border);
}


/* =========================================================
   SweetAlert2 (swal2) — FF Theme (token-based)
   Uses ONLY existing FF tokens from body.ff-app
========================================================= */
body.ff-app .swal2-container.swal2-backdrop-show {
    /* subtle backdrop using text color (works light/dark) */
    background: rgba(0, 0, 0, 0.45) !important;
}

/* Modal card */
body.ff-app .swal2-container .swal2-popup.swal2-modal {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-1) !important;
    /* spacing */
    padding: 18px 18px 14px !important;
    /* keep layout consistent */
    box-sizing: border-box !important;
}

/* Title + content */
body.ff-app .swal2-container .swal2-title {
    color: var(--text) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    line-height: 1.25 !important;
    margin: 10px 0 6px !important;
}

body.ff-app .swal2-container .swal2-html-container {
    color: var(--text-muted) !important;
}

/* Icon styling (warning shown in your example) */
body.ff-app .swal2-container .swal2-icon.swal2-warning {
    border-color: color-mix(in srgb, var(--warning) 60%, transparent) !important;
    color: var(--warning) !important;
}

    body.ff-app .swal2-container .swal2-icon.swal2-warning .swal2-icon-content {
        color: var(--warning) !important;
    }

/* Actions row spacing */
body.ff-app .swal2-container .swal2-actions {
    gap: 10px !important;
    margin-top: 14px !important;
}

    /* Base button style (normalize SweetAlert2 defaults) */
    body.ff-app .swal2-container .swal2-actions .swal2-styled {
        border-radius: var(--radius-md) !important;
        border: 1px solid var(--border) !important;
        background: var(--surface) !important;
        color: var(--text) !important;
        padding: 10px 14px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        box-shadow: none !important;
        transition: background 120ms ease, transform 120ms ease, border-color 120ms ease !important;
    }

        /* Hover */
        body.ff-app .swal2-container .swal2-actions .swal2-styled:hover {
            background: var(--surface-2) !important;
            transform: translateY(-1px);
        }

        /* Focus ring */
        body.ff-app .swal2-container .swal2-actions .swal2-styled:focus,
        body.ff-app .swal2-container .swal2-actions .swal2-styled:focus-visible {
            outline: none !important;
            box-shadow: 0 0 0 3px var(--focus) !important;
        }

/* Confirm button (maps nicely to warning/error flows)
   Your example is a destructive "Yes, Clear" => use --error
*/
body.ff-app .swal2-container .swal2-confirm.swal2-styled {
    background: color-mix(in srgb, var(--error) 14%, var(--surface)) !important;
    border-color: color-mix(in srgb, var(--error) 45%, var(--border)) !important;
    color: var(--text) !important;
}

    /* Confirm hover */
    body.ff-app .swal2-container .swal2-confirm.swal2-styled:hover {
        background: color-mix(in srgb, var(--error) 20%, var(--surface-2)) !important;
    }

body.ff-app .swal2-container .swal2-popup.ff-copy-on-click-dialog .swal2-actions.ff-copy-on-click-actions {
    gap: 12px !important;
    justify-content: center !important;
}

body.ff-app .swal2-container .swal2-popup.ff-copy-on-click-dialog .swal2-actions.ff-copy-on-click-actions .swal2-styled {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .swal2-container .swal2-popup.ff-copy-on-click-dialog .swal2-confirm.ff-copy-selected-rows-button.swal2-styled {
    background: var(--success-bg) !important;
    border-color: var(--success-brd) !important;
    color: var(--text) !important;
}

body.ff-app .swal2-container .swal2-popup.ff-copy-on-click-dialog .swal2-confirm.ff-copy-selected-rows-button.swal2-styled:hover {
    background: color-mix(in srgb, var(--success) 24%, var(--surface-2)) !important;
    border-color: color-mix(in srgb, var(--success) 68%, var(--border)) !important;
}

/* Cancel button (neutral) */
body.ff-app .swal2-container .swal2-cancel.swal2-styled {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* Optional: match dropdown/menu borders if you use swal lists */
body.ff-app .swal2-container .swal2-footer {
    border-top: 1px solid var(--divider) !important;
    color: var(--text-muted) !important;
}

/* Optional: inputs (if you ever use swal input dialogs) */
body.ff-app .swal2-container .swal2-input,
body.ff-app .swal2-container .swal2-textarea,
body.ff-app .swal2-container .swal2-select {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
}

    body.ff-app .swal2-container .swal2-input:focus,
    body.ff-app .swal2-container .swal2-textarea:focus,
    body.ff-app .swal2-container .swal2-select:focus {
        outline: none !important;
        box-shadow: 0 0 0 3px var(--focus) !important;
        border-color: color-mix(in srgb, var(--primary) 55%, var(--border)) !important;
    }

/* =========================================================
   Add to: body.ff-app  (LIGHT)
========================================================= */
body.ff-app {
    /* Destructive-ish secondary action (Clear) */
    --clear: #dd6b55;
    --clear-hover: #e9826f;
    --clear-active: #c95a46;
    --on-clear: #ffffff;
}

    /* =========================================================
   Add to: body.ff-app[data-theme="dark"]  (DARK)
========================================================= */
    body.ff-app[data-theme="dark"] {
        --clear: #ff8a7a;
        --clear-hover: #ff9c8f;
        --clear-active: #ff7664;
        --on-clear: #0b1220; /* matches your dark on-primary pattern */
    }

    /* Confirm button for WARNING modals uses Clear tokens */
    body.ff-app .swal2-container .swal2-popup.swal2-icon-warning .swal2-confirm.swal2-styled {
        background: var(--clear) !important;
        border-color: color-mix(in srgb, var(--clear) 65%, var(--border)) !important;
        color: var(--on-clear) !important;
    }

        body.ff-app .swal2-container .swal2-popup.swal2-icon-warning .swal2-confirm.swal2-styled:hover {
            background: var(--clear-hover) !important;
            transform: translateY(-1px);
        }

        body.ff-app .swal2-container .swal2-popup.swal2-icon-warning .swal2-confirm.swal2-styled:active {
            background: var(--clear-active) !important;
        }


    /* =========================================================
   FF Page Header (Waybill-capture style)
   Applies to: <section id="page-title" class="ff-page-header">
========================================================= */
/*    body.ff-app .ff-page-header {
        background: var(--topbar-bg);
        border: 1px solid var(--topbar-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-1);
        padding: 12px 14px;
        margin-bottom: 12px;
    }*/

        /* Row layout */
        body.ff-app .ff-page-header .ff-page-header-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;  /*prevents overflow on smaller widths */
        }

       /*  Title wrap */
        body.ff-app .ff-page-header .ff-page-title-wrap {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 220px;  /*stops title collapsing too aggressively*/
        }

        /* Title */
        /*body.ff-app .ff-page-header .ff-page-title {
            margin: 0;
            font-size: 22px;
            font-weight: 700;
            letter-spacing: 0.2px;
            color: var(--topbar-text);
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }*/

        /* Subtitle inside title */
        /*body.ff-app .ff-page-header .ff-page-subtitle {
            color: var(--topbar-text-muted);
            font-weight: 600;
            margin-left: 8px;
        }*/

        /* Toolbar */
        /*body.ff-app .ff-page-header .ff-toolbar {
            margin-left: auto;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            flex-wrap: wrap;
        }*/

        /* Action buttons (align with your system) */
        /*body.ff-app .ff-page-header .ff-action {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            height: 38px;
            padding: 0 12px;
            border-radius: var(--radius-md);
            border: 1px solid var(--topbar-border);
            background: transparent;
            color: var(--topbar-text);
            text-decoration: none;
            line-height: 1;
            transition: background 120ms ease, transform 120ms ease, border-color 120ms ease;
        }

            body.ff-app .ff-page-header .ff-action:hover {
                background: var(--topbar-hover);
                transform: translateY(-1px);
            }

            body.ff-app .ff-page-header .ff-action:active {
                transform: translateY(0);
            }*/

            /* Icons in actions */
            /*body.ff-app .ff-page-header .ff-action i {
                color: var(--topbar-text);
            }*/

        /* Labels */
        /*body.ff-app .ff-page-header .ff-action-label {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.2px;
            color: var(--topbar-text);
        }*/

        /* Dropdown caret */
        /*body.ff-app .ff-page-header .ff-action .caret {
            margin-left: 4px;
            opacity: 0.75;
        }*/

        /* Favourite button (uses your existing favourite/unfavourite icons) */
        /*body.ff-app .ff-page-header .ff-icon-btn.ff-fav-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 38px;
            width: 38px;
            border-radius: var(--radius-md);
            border: 1px solid var(--topbar-border);
            background: transparent;
            color: var(--topbar-text);
            transition: background 120ms ease, transform 120ms ease;
        }

            body.ff-app .ff-page-header .ff-icon-btn.ff-fav-btn:hover {
                background: var(--topbar-hover);
                transform: translateY(-1px);
            }*/

        /* Keep the included admin dropdown from bringing old inline color along */
        /*body.ff-app .ff-page-header .ff-toolbar .dropdown-toggle {
            color: var(--topbar-text) !important;
        }*/

    /* =========================================
   Compact header height + make action content horizontal
   (fixes waybill extra height + matches collections)
   Drop this AFTER your current header styles
   ========================================= */

    body.ff-app #page-title.ff-page-header {
        /* If you already set padding elsewhere, this will normalize it */
        padding: 10px 14px;
    }

        /* Default h1 margins often add “mystery height” */
        body.ff-app #page-title.ff-page-header .ff-page-title {
            margin: 0;
            line-height: 1.15;
        }

        /* Force label NEXT TO icon (undo any stacking rule that may exist on waybill) */
        body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action,
        body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle {
            display: inline-flex;
            flex-direction: row; /* <-- key: stop icon/text stacking */
            align-items: center;
            gap: 8px;
            height: 42px; /* match your “normal” action height */
            padding: 0 12px;
        }

        /* Ensure label isn’t being forced to block (which can stack it) */
        body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action-label {
            display: inline-block;
            margin: 0;
        }

    /* =========================================================
   DASHBOARD topbar: match ff-page-header sizing + horizontal buttons
   (compact vertical space + label next to icon)
   ========================================================= */

    body.ff-app #page-title.ff-topbar-bleed .panel-heading.ff-topbar {
        /* Bootstrap .panel-heading adds padding — normalize it */
        padding: 10px 14px !important;
        gap: 10px;
        flex-wrap: wrap;
        background: var(--topbar-bg);
        border: 1px solid var(--topbar-border);
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Kill any inherited h1 padding/margins that inflate height */
    body.ff-app #page-title.ff-topbar-bleed .ff-topbar-title {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.15;
        color: var(--topbar-text);
    }

        /* Star icon: prevent fa-3x from making the bar tall */
        body.ff-app #page-title.ff-topbar-bleed .ff-topbar-title .fa-star {
            font-size: 16px !important;
        }

    /* Actions UL: remove bootstrap quirks and keep it tight */
    body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions {
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: wrap;
    }

        /* Remove the li padding that adds vertical height */
        body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions > li {
            padding-top: 0 !important;
            margin: 0 !important;
            display: flex;
            align-items: center;
        }

            /* Make ALL dashboard actions match the ff-page-header (icon + label inline) */
            body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions > li > a.ff-action,
            body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions .btn-group > .dropdown-toggle,
            body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions .dropdown > .dropdown-toggle,
            body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions a.dropdown-toggle,
            body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions button.dropdown-toggle {
                display: inline-flex !important;
                flex-direction: row !important; /* <-- key: label beside icon */
                align-items: center !important;
                justify-content: center !important;
                gap: 8px;
                height: 42px;
                min-width: 42px;
                padding: 0 12px;
                border-radius: 12px;
                border: 1px solid var(--topbar-border);
                background: transparent;
                color: var(--topbar-text) !important;
                text-decoration: none !important;
                line-height: 1 !important;
                transition: background 120ms ease, transform 120ms ease, border-color 120ms ease;
            }

                body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions > li > a.ff-action:hover,
                body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions .dropdown-toggle:hover {
                    background: var(--topbar-hover);
                    transform: translateY(-1px);
                }

        /* Keep the icon chip, but don’t let it dictate height */
        body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions .sparkline {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            border-radius: 10px;
            background: var(--surface-2);
        }

            /* Normalize icons (text30 was huge) */
            body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions i.text30,
            body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions .sparkline i {
                font-size: 18px !important;
                line-height: 1 !important;
            }

        /* Show the label inline (your dashboard uses .values > p) */
        body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions .values {
            display: inline-flex !important;
            align-items: center;
        }

            body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions .values p {
                margin: 0 !important;
                line-height: 1 !important;
                color: var(--topbar-text);
            }

        /* Caret: keep it compact */
        body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions .caret {
            margin-left: 6px;
            opacity: 0.75;
        }


/* =========================================================
   WAYBILL STAGES: legacy header -> capture header look
   (keeps row/col/panel/ul/li intact to avoid breaking pages)
========================================================= */

.ff-waybill #page-title.ff-page-header.ff-page-header-legacy {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    padding: 10px 12px;
    margin-bottom: 12px;
}

/* Remove panel chrome/padding that inflates height */
.ff-waybill #page-title .panel,
.ff-waybill #page-title .panel-heading {
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Title row alignment */
.ff-waybill #page-title .ff-page-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
}

.ff-waybill #page-title .ff-page-subtitle {
    color: var(--text-muted);
    font-weight: 600;
    margin-left: 2px;
}

/* Fav button like capture */
.ff-waybill #page-title .ff-fav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    padding: 0;
    margin-left: 4px;
}

    .ff-waybill #page-title .ff-fav-btn:hover {
        background: var(--surface-2);
    }

    .ff-waybill #page-title .ff-fav-btn:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 3px var(--focus);
    }

/* Toolbar = horizontal, no extra top padding from legacy li */
.ff-waybill #page-title .ff-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .ff-waybill #page-title .ff-toolbar > li {
        padding-top: 0 !important;
    }

/* Make legacy anchors/buttons look like capture buttons */
.ff-waybill #page-title .ff-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-sm);
    line-height: 1;
    text-decoration: none;
}

    /* Neutralize bootstrap .btn look inside header */
    .ff-waybill #page-title .ff-action.btn {
        box-shadow: none !important;
    }

    /* Flatten legacy icon/label wrappers into a single row */
    .ff-waybill #page-title .ff-action .sparkline,
    .ff-waybill #page-title .ff-action .values {
        display: inline-flex;
        align-items: center;
    }

    .ff-waybill #page-title .ff-action .values {
        margin: 0;
    }

    .ff-waybill #page-title .ff-action .sparkline span {
        display: inline-flex;
        align-items: center;
    }

    /* Icon size: treat text30 as "icon" */
    .ff-waybill #page-title .ff-action i,
    .ff-waybill #page-title .ff-action .text30 {
        font-size: 16px !important;
    }

/* Label: inline next to icon (fixes height + matches capture) */
.ff-waybill #page-title .ff-action-label {
    margin: 0 !important;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    text-transform: none;
}

/* Hover/focus */
.ff-waybill #page-title .ff-action:hover {
    background: var(--surface-2);
}

.ff-waybill #page-title .ff-action:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--focus);
}

/* Primary + danger (uses your tokens) */
.ff-waybill #page-title .ff-action-primary,
.ff-waybill #page-title .btn.btn-o.ff-action { /* SAVE buttons are .btn-o in legacy */
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

/* Only non-primary/non-danger actions get the "surface" hover */
body.ff-app .ff-waybill .ff-action:not(.ff-action-primary):not(.ff-action-danger):hover {
    background: var(--surface-2) !important;
    border-color: var(--primary) !important;
}


.ff-waybill #page-title .ff-action-danger {
    background: var(--error);
    border-color: var(--error);
    color: var(--on-primary);
}

/* Primary actions must stay primary so --on-primary remains readable */
body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
}

    body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary:hover,
    body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary:focus,
    body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary:focus-visible {
        background: var(--primary-hover) !important;
        border-color: var(--primary-hover) !important;
        color: var(--on-primary) !important;
    }

    body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary:active {
        background: var(--primary-active) !important;
        border-color: var(--primary-active) !important;
        color: var(--on-primary) !important;
    }

    /* Disabled should still be readable (your screenshot shows disabled) */
    body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary[disabled],
    body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary:disabled {
        opacity: 0.65;
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: var(--on-primary) !important;
    }

    /* Ensure the icon follows the same color */
    body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary i {
        color: currentColor !important;
    }


/* Give the submenu inner padding so rows can be full-width without margins */
/*body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu {
    padding: 6px 8px !important;*/ /* instead of 6px 0 */
    /*box-sizing: border-box;
}*/

    /* Make every row link fill the available width */
    /*body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li > a {
        width: 100%;
        margin: 0 !important;*/ /* kill any inherited margin */
        /*border-radius: var(--radius-sm);
    }*/

    /* Active row: remove the margin that was clipping it */
    /*body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li.active > a {
        margin: 0 !important;*/ /* overrides your margin: 0 8px */
        /*border-bottom-color: transparent !important;*/ /* optional: looks cleaner */
    /*}*/

    /* Prevent the LI background from creating a weird “double highlight” */
    /*body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li.active,
    body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li.open {
        background: transparent !important;
    }*/

.ff-action.ff-action-primary:disabled,
.ff-action.ff-action-primary[disabled] {
    opacity: .55;
    color: var(--on-primary);
}
/* If your disabled state changes background, also force it: */
.ff-action.ff-action-primary:disabled,
.ff-action.ff-action-primary[disabled] {
    background: var(--primary);
}

/* force scrolling on the original fixed sidebar submenu */
body.ff-app #sidebar .main-navigation-menu > li > ul.sub-menu.sub-menu-scroll {
    position: fixed !important;
    bottom: 0 !important;
    /* your example inline style has top: 466px; so this height matches that.
     If top changes, update 466px or use the JS snippet below. */
    height: calc(100vh - 466px) !important;
    max-height: calc(100vh - 466px) !important;
    overflow: auto !important; /* overrides any overflow:hidden/visible */
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}

.symbol.required::before,
.symbol.required::after {
    color: var(--error); /* or whatever token you want */
}
.has-success .symbol::before{
    color: var(--success) !important;
}

.has-error .error {
    color: var(--error) !important;
}

/* Required error: user has touched it and it's still empty */
.ff-input.ng-invalid-required.ng-touched {
    border-color: var(--error) !important;
    background: color-mix(in srgb, var(--error) 8%, transparent) !important;
}

    /* Keep it red on focus too */
    .ff-input.ng-invalid-required.ng-touched:focus {
        outline: 0 !important;
        border-color: var(--error) !important;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 28%, transparent) !important;
    }

/* Angular invalid (required) — wins over .ff-waybill .form-control + .has-error + generic :hover */
body.ff-app .ff-waybill .ff-input.form-control.ng-invalid-required.ng-touched,
body.ff-app .ff-waybill .has-error .ff-input.form-control {
    border: 1px solid var(--error) !important;
    border-style: solid !important; /* cancels dotted rules */
    border-bottom-style: solid !important; /* cancels dotted bottom-only rules */
    background: color-mix(in srgb, var(--error) 8%, var(--surface)) !important;
}

    /* Keep the error border on hover (beats input[type="text"]:hover !important) */
    body.ff-app .ff-waybill .ff-input.form-control.ng-invalid-required.ng-touched:hover,
    body.ff-app .ff-waybill .has-error .ff-input.form-control:hover {
        border-color: var(--error) !important;
    }

    /* Error focus ring */
    body.ff-app .ff-waybill .ff-input.form-control.ng-invalid-required.ng-touched:focus,
    body.ff-app .ff-waybill .has-error .ff-input.form-control:focus {
        outline: 0 !important;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 28%, transparent) !important;
    }





body.ff-app .ff-waybill fieldset > legend {
    position: static !important;
    display: inline-block;
    margin: 0 0 0 0 !important;
    padding: 6px 10px !important;
    border: 1px solid var(--divider) !important;
    border-radius: 999px;
    background: var(--surface-2) !important;
    color: var(--text-muted) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.ff-app .ff-waybill .ff-stages-capture fieldset {
    padding: 10px 12px 8px;
    margin-bottom: 10px;
}

body.ff-app .ff-waybill .ff-stages-capture fieldset > legend {
    padding: 4px 8px !important;
    margin-bottom: 6px !important;
    font-size: 12px !important;
    line-height: 1.2;
}

body.ff-app .ff-waybill .ff-stages-capture .form-group {
    margin-bottom: 8px;
}

body.ff-app .ff-waybill .ff-stages-capture label {
    margin-bottom: 3px;
    line-height: 1.25;
}

body.ff-app .ff-waybill .ff-stages-capture .row.padding-bottom-30 {
    padding-bottom: 12px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .row.padding-bottom-20,
body.ff-app .ff-waybill .ff-stages-capture .padding-bottom-20 {
    padding-bottom: 8px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .padding-top-20 {
    padding-top: 10px !important;
}

body.ff-app .ff-waybill .ff-stages-client-row,
body.ff-app .ff-waybill .ff-stages-id-row,
body.ff-app .ff-waybill .ff-stages-parcel-options-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill .ff-stages-client-row::before,
body.ff-app .ff-waybill .ff-stages-client-row::after,
body.ff-app .ff-waybill .ff-stages-id-row::before,
body.ff-app .ff-waybill .ff-stages-id-row::after,
body.ff-app .ff-waybill .ff-stages-parcel-options-row::before,
body.ff-app .ff-waybill .ff-stages-parcel-options-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill .ff-stages-client-row > [class*="col-"],
body.ff-app .ff-waybill .ff-stages-id-row > [class*="col-"],
body.ff-app .ff-waybill .ff-stages-parcel-options-row > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill .ff-stages-client-acc {
    flex: 0 0 105px;
}

body.ff-app .ff-waybill .ff-stages-client-name {
    flex: 1 1 280px;
}

body.ff-app .ff-waybill .ff-stages-capture-waybill {
    flex: 0 0 360px;
}

body.ff-app .ff-waybill .ff-stages-id-row {
    flex-wrap: nowrap;
    gap: 8px;
}

body.ff-app .ff-waybill .ff-stages-capture-date {
    flex: 0 0 104px;
}

body.ff-app .ff-waybill .ff-stages-waybill-no {
    flex: 1 1 150px;
    min-width: 145px;
}

body.ff-app .ff-waybill .ff-stages-capture-date label,
body.ff-app .ff-waybill .ff-stages-value-field label {
    white-space: nowrap;
}

body.ff-app .ff-waybill .ff-stages-capture-date label.width100 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

body.ff-app .ff-waybill .ff-stages-capture-date label.width100 .pull-right {
    float: none !important;
}

body.ff-app .ff-waybill .ff-stages-courier {
    flex: 0 1 185px;
}

body.ff-app .ff-waybill .ff-stages-courier-action {
    flex: 0 0 38px;
    padding-top: 22px;
}

body.ff-app .ff-waybill .ff-stages-courier-action .btn {
    min-width: 34px;
    height: 34px;
    padding: 6px 10px;
}

body.ff-app .ff-waybill .ff-stages-package-field {
    flex: 1 1 240px;
    max-width: 320px;
}

body.ff-app .ff-waybill .ff-stages-value-field {
    flex: 0 0 158px;
}

body.ff-app .ff-waybill .ff-stages-checks {
    flex: 1 1 300px;
    padding-top: 18px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .checkbox.clip-check,
body.ff-app .ff-waybill .ff-stages-capture .radio.clip-radio {
    margin-top: 2px;
    margin-bottom: 4px;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-parcel-fieldset {
    padding-bottom: 12px;
    overflow: visible;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-parcel-grid-responsive {
    padding-bottom: 2px;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid {
    margin-bottom: 6px !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid > tfoot > tr > th,
body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid > tfoot > tr > td {
    position: relative;
    z-index: 1;
    padding: 8px 8px !important;
    line-height: 1.35;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid > tfoot > tr > th:first-child {
    min-width: 96px;
    white-space: nowrap;
}

@media (max-width: 520px) {
    body.ff-app .ff-waybill .ff-stages-id-row {
        flex-wrap: wrap;
    }

    body.ff-app .ff-waybill .ff-stages-capture-waybill,
    body.ff-app .ff-waybill .ff-stages-capture-date,
    body.ff-app .ff-waybill .ff-stages-waybill-no,
    body.ff-app .ff-waybill .ff-stages-value-field {
        flex: 1 1 160px;
    }
}

body.ff-app .ff-waybill.ff-full-capture fieldset {
    padding: 10px 12px 8px;
    margin-bottom: 10px;
}

body.ff-app .ff-waybill.ff-full-capture fieldset > legend {
    padding: 4px 8px !important;
    margin-bottom: 6px !important;
    font-size: 12px !important;
    line-height: 1.2;
}

body.ff-app .ff-waybill.ff-full-capture .form-group {
    margin-bottom: 6px;
}

body.ff-app .ff-waybill.ff-full-capture label {
    margin-bottom: 3px;
    line-height: 1.25;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs > .row,
body.ff-app .ff-waybill.ff-full-capture .ff-full-other-grid,
body.ff-app .ff-waybill.ff-full-capture .ff-full-collection-grid > .row,
body.ff-app .ff-waybill.ff-full-capture .ff-full-delivery-grid > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px 8px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row::before,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row::after,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs > .row::before,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs > .row::after,
body.ff-app .ff-waybill.ff-full-capture .ff-full-other-grid::before,
body.ff-app .ff-waybill.ff-full-capture .ff-full-other-grid::after,
body.ff-app .ff-waybill.ff-full-capture .ff-full-collection-grid > .row::before,
body.ff-app .ff-waybill.ff-full-capture .ff-full-collection-grid > .row::after,
body.ff-app .ff-waybill.ff-full-capture .ff-full-delivery-grid > .row::before,
body.ff-app .ff-waybill.ff-full-capture .ff-full-delivery-grid > .row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > [class*="col-"],
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs > .row > [class*="col-"],
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs > .row > div:not([class]) > [class*="col-"],
body.ff-app .ff-waybill.ff-full-capture .ff-full-other-grid > [class*="col-"],
body.ff-app .ff-waybill.ff-full-capture .ff-full-collection-grid > .row > [class*="col-"],
body.ff-app .ff-waybill.ff-full-capture .ff-full-delivery-grid > .row > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs > .row > div:not([class]) {
    display: contents;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-1 {
    flex: 0 0 105px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-3 {
    flex: 1 1 245px;
    max-width: 360px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs {
    flex: 999 1 620px;
    max-width: none;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs > .row > [class*="col-"]:not(.ff-full-courier-field):not(.ff-full-courier-action):not(.ff-full-capture-date),
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs > .row > div:not([class]) > [class*="col-"]:not(.ff-full-courier-field):not(.ff-full-courier-action):not(.ff-full-capture-date) {
    flex: 1 1 170px;
    max-width: 240px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-courier-field {
    flex: 0 1 165px;
    max-width: 185px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-courier-action {
    flex: 0 0 34px;
    max-width: 34px;
    padding-top: 18px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-courier-action .btn-group,
body.ff-app .ff-waybill.ff-full-capture .ff-full-courier-action .dropdown-toggle {
    width: 100%;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-courier-action .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--ff-control-h);
    min-height: var(--ff-control-h);
    padding: 0;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-capture-date {
    flex: 0 0 165px;
    max-width: 175px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-capture-date label.width100 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    white-space: nowrap;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-capture-date label.width100 .pull-right {
    float: none !important;
    margin-left: auto;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-driver-field,
body.ff-app .ff-waybill.ff-full-capture .ff-full-schedule-field {
    flex: 0 1 165px;
    max-width: 190px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-collection-grid {
    flex: 0 1 345px;
    max-width: 380px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-delivery-grid {
    flex: 1 1 390px;
    max-width: 470px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-order-field {
    flex: 1 1 115px;
    min-width: 105px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-date-field {
    flex: 0 0 128px;
    max-width: 128px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-time-field {
    flex: 0 0 72px;
    max-width: 72px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-date-field .input-icon,
body.ff-app .ff-waybill.ff-full-capture .ff-full-date-field .ff-input {
    width: 100%;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-time-field input.time.settime {
    width: 7ch !important;
    min-width: 7ch !important;
    max-width: 7ch !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

@media (max-width: 900px) {
    body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-1,
    body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-3,
    body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs,
    body.ff-app .ff-waybill.ff-full-capture .ff-full-driver-field,
    body.ff-app .ff-waybill.ff-full-capture .ff-full-schedule-field,
    body.ff-app .ff-waybill.ff-full-capture .ff-full-collection-grid,
    body.ff-app .ff-waybill.ff-full-capture .ff-full-delivery-grid {
        flex: 1 1 100%;
        max-width: none;
    }
}

body.ff-app .ff-waybill.ff-quick-capture fieldset {
    padding: 10px 12px 8px;
    margin-bottom: 10px;
}

body.ff-app .ff-waybill.ff-quick-capture fieldset > legend {
    padding: 4px 8px !important;
    margin-bottom: 6px !important;
    font-size: 12px !important;
    line-height: 1.2;
}

body.ff-app .ff-waybill.ff-quick-capture .form-group {
    margin-bottom: 8px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-main-fieldset .form-group {
    margin-bottom: 4px;
}

body.ff-app .ff-waybill.ff-quick-capture label {
    margin-bottom: 3px;
    line-height: 1.25;
}

body.ff-app .ff-waybill.ff-quick-capture .row.padding-10 {
    padding: 4px 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .padding-top-30 {
    padding-top: 12px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .checkbox.clip-check,
body.ff-app .ff-waybill.ff-quick-capture .radio.clip-radio {
    margin-top: 2px;
    margin-bottom: 4px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-name-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-body,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pair-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 3px 10px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-name-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-name-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-body::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-body::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pair-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pair-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-name-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-row > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-name-row > .col-md-6,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row > .col-md-6 {
    flex: 1 1 420px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-name-row > .col-md-6 > .row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row > .col-md-6 > .row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-col > .row {
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-card-wrap {
    margin-left: 0;
    margin-right: 0;
    padding: 2px 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-card {
    width: 100%;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-body {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-body > .row {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-body > .row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pair-row > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-body > .ff-quick-full-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-body > .ff-quick-address-block,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-body > .ff-quick-pair-row {
    flex: 1 1 100%;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-body > .ff-quick-half-row {
    flex: 1 1 calc(50% - 6px);
    min-width: 220px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-body > .ff-quick-postal-row {
    flex: 1 1 calc(50% - 6px);
    min-width: 220px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pair-row > [class*="col-"] {
    flex: 1 1 calc(50% - 6px);
    min-width: 220px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-card .form-group {
    margin-bottom: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-card .form-group > label {
    display: block;
    width: 100% !important;
    margin: 0 0 3px 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-card .form-group > .form-control,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-card .form-group > .input-icon,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-card .form-group > .ff-control,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-card .form-group > .ui-select-container {
    width: 100%;
    min-width: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-waybill-status-label {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100% !important;
    min-height: 17px;
    white-space: nowrap;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-waybill-caption {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-waybill-badges {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-left: auto;
    min-width: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-waybill-badges .label {
    float: none !important;
    display: inline-flex;
    align-items: center;
    height: 17px;
    line-height: 1;
    margin-left: 0 !important;
    padding: 2px 6px;
    font-size: 11px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-inline-field {
    display: grid;
    grid-template-columns: minmax(84px, 104px) minmax(0, 1fr);
    align-items: center;
    gap: 6px 8px;
    margin-bottom: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-inline-field > label {
    grid-column: 1;
    margin: 0;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-inline-field > .ff-control,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-inline-field > .ui-select-container {
    grid-column: 2;
    min-width: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-inline-field > .error {
    grid-column: 2;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-address-block .form-group {
    display: block;
    width: 100%;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-address-block .form-group > .form-control + .form-control {
    margin-top: 0 !important;
}

body.ff-app .ff-waybill #SAddr1,
body.ff-app .ff-waybill #SAddr2,
body.ff-app .ff-waybill #SAddr3,
body.ff-app .ff-waybill #SAddr4,
body.ff-app .ff-waybill #RAddr1,
body.ff-app .ff-waybill #RAddr2,
body.ff-app .ff-waybill #RAddr3,
body.ff-app .ff-waybill #RAddr4 {
    margin-top: 0 !important;
}

body.ff-app .ff-waybill #SAddr1,
body.ff-app .ff-waybill #SAddr2,
body.ff-app .ff-waybill #SAddr3,
body.ff-app .ff-waybill #SAddr4,
body.ff-app .ff-waybill #RAddr1,
body.ff-app .ff-waybill #RAddr2,
body.ff-app .ff-waybill #RAddr3,
body.ff-app .ff-waybill #RAddr4,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-address-block .form-group > .ff-input {
    border-radius: 0 !important;
}

body.ff-app .ff-waybill #SAddr1,
body.ff-app .ff-waybill #RAddr1,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-address-block .form-group > .ff-input:first-of-type {
    border-top-left-radius: var(--radius-sm) !important;
    border-top-right-radius: var(--radius-sm) !important;
}

body.ff-app .ff-waybill #SAddr4,
body.ff-app .ff-waybill #RAddr4,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-address-block .form-group > .ff-input:last-of-type {
    border-bottom-left-radius: var(--radius-sm) !important;
    border-bottom-right-radius: var(--radius-sm) !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-card .form-group label .pull-right {
    float: none !important;
    display: block;
}

body.ff-app .ff-waybill.ff-quick-capture #showSender + label:after,
body.ff-app .ff-waybill.ff-quick-capture #retainSender + label:after,
body.ff-app .ff-waybill.ff-quick-capture #BillRec + label:after {
    top: 1px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sr-switch-row {
    height: 16px;
    margin: -8px 0 -2px 0;
    overflow: visible;
    position: relative;
    z-index: 2;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sr-switch-row > .col-md-12 {
    height: 16px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-sr-switch {
    width: 28px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    transform: translateY(-4px);
}

body.ff-app .ff-waybill .ff-geocode-inline {
    width: 28px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
}

body.ff-app .ff-waybill .ff-linked-menu-field {
    padding-right: 0 !important;
}

body.ff-app .ff-waybill .ff-linked-menu-field input.form-control,
body.ff-app .ff-waybill .ff-linked-menu-field .ff-input {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

body.ff-app .ff-waybill .ff-linked-menu-action {
    flex: 0 0 34px;
    max-width: 34px;
    width: 34px !important;
    margin-top: 0 !important;
    padding: 18px 0 0 0 !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs > .row > .ff-linked-menu-action,
body.ff-app .ff-waybill .ff-stages-id-row > .ff-linked-menu-action {
    margin-left: -8px !important;
}

body.ff-app .ff-waybill .ff-linked-menu-action .btn-group,
body.ff-app .ff-waybill .ff-linked-menu-action .dropdown-toggle {
    width: 100%;
}

body.ff-app .ff-waybill .ff-linked-menu-action .dropdown-toggle {
    align-items: center;
    border-left: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--radius-sm) !important;
    border-bottom-right-radius: var(--radius-sm) !important;
    display: inline-flex;
    height: var(--ff-control-h);
    justify-content: center;
    min-height: var(--ff-control-h);
    padding: 0 !important;
}

body.ff-app .ff-waybill .ff-linked-menu-action .caret {
    margin: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-geocode-row {
    margin: -2px 0 2px 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-geocode-row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-geocode-row .mapboxgl-ctrl-geocoder--input {
    height: 24px !important;
    min-height: 24px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row {
    margin-bottom: 2px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row .form-group {
    margin-bottom: 2px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row .checkbox.clip-check {
    margin-top: 0;
    margin-bottom: 1px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-toggle-row {
    margin: 0 0 2px 0 !important;
    padding: 0 0 0 10px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-toggle-row > [class*="col-"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-toggle {
    margin: 0 0 2px 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-row {
    align-items: center;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-col {
    flex: 1 1 380px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-col > .row > [class*="col-"] {
    float: none;
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-inline-field .ff-ms,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-inline-field .ui-select-container {
    margin-bottom: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-toggle label:after {
    top: 1px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-details .form-group {
    margin-bottom: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-details .form-group > label {
    display: block;
    width: 100% !important;
    margin: 0 0 3px 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-details .ff-control,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-details .ui-select-container,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-details .ff-ms {
    width: 100%;
    min-width: 0;
    margin-bottom: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-top-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-mid-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-linked-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-date-time-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-top-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-top-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-mid-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-mid-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-linked-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-linked-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-date-time-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-date-time-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-top-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-mid-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-linked-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-date-time-row > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-details .form-control,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-details .input-icon,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-details .ff-control,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-details .ui-select-container {
    width: 100%;
    min-width: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-top-row > .ff-quick-linked-field {
    flex: 1 1 300px;
    min-width: 260px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-top-row > .ff-quick-date-field {
    flex: 0 1 160px;
    min-width: 138px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-top-row > .ff-quick-time-field {
    flex: 0 1 112px;
    min-width: 96px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-mid-row > .ff-quick-wide-field {
    flex: 1 1 230px;
    min-width: 190px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-mid-row > .ff-quick-date-field,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-mid-row > .ff-quick-id-field {
    flex: 0 1 160px;
    min-width: 138px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-mid-row > .ff-quick-check-field {
    flex: 0 1 120px;
    min-width: 110px;
    padding-top: 20px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-linked-row {
    flex-wrap: nowrap;
    gap: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-linked-number,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-linked-date {
    flex: 1 1 130px;
    min-width: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-linked-menu {
    flex: 0 0 34px;
    align-self: flex-end;
    margin-top: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-linked-menu .btn {
    min-width: 34px;
    min-height: 34px;
    padding-left: 8px;
    padding-right: 8px;
}

body.ff-app .ff-waybill .ff-pod-row,
body.ff-app .ff-waybill .ff-pod-date-time-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill .ff-pod-row::before,
body.ff-app .ff-waybill .ff-pod-row::after,
body.ff-app .ff-waybill .ff-pod-date-time-row::before,
body.ff-app .ff-waybill .ff-pod-date-time-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill .ff-pod-row > [class*="col-"],
body.ff-app .ff-waybill .ff-pod-date-time-row > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill .ff-pod-details .form-control,
body.ff-app .ff-waybill .ff-pod-details .input-icon,
body.ff-app .ff-waybill .ff-pod-details .ff-control,
body.ff-app .ff-waybill .ff-pod-details .ui-select-container {
    width: 100%;
    min-width: 0;
}

body.ff-app .ff-waybill .ff-pod-row > .ff-pod-date-time {
    flex: 0 1 270px;
    min-width: 246px;
}

body.ff-app .ff-waybill .ff-pod-row > .ff-pod-person {
    flex: 1 1 190px;
    min-width: 170px;
}

body.ff-app .ff-waybill .ff-pod-row > .ff-pod-notes {
    flex: 1.4 1 240px;
    min-width: 200px;
}

body.ff-app .ff-waybill .ff-pod-row > .ff-pod-note-type {
    flex: 1 1 190px;
    min-width: 170px;
}

body.ff-app .ff-waybill .ff-pod-row > .ff-pod-action {
    flex: 0 0 92px;
    min-width: 92px;
}

body.ff-app .ff-waybill .ff-pod-date-time-row {
    flex-wrap: nowrap;
    gap: 6px;
}

body.ff-app .ff-waybill .ff-pod-date-time-row > .ff-pod-date {
    flex: 1 1 150px;
    min-width: 0;
}

body.ff-app .ff-waybill .ff-pod-date-time-row > .ff-pod-time {
    flex: 0 0 82px;
    min-width: 82px;
}

body.ff-app .ff-waybill .ff-pod-time input.time.settime {
    width: 7ch !important;
    min-width: 7ch !important;
    max-width: 7ch !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

body.ff-app .ff-waybill .ff-pod-action .btn {
    margin-top: 22px !important;
    white-space: nowrap;
    width: 100%;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-row > .ff-quick-pod-date-time {
    flex: 0 1 270px;
    min-width: 246px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-row > .ff-quick-pod-person {
    flex: 1 1 190px;
    min-width: 170px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-row > .ff-quick-pod-notes {
    flex: 1.4 1 240px;
    min-width: 200px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-row > .ff-quick-pod-note-type {
    flex: 1 1 190px;
    min-width: 170px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-row > .ff-quick-pod-action {
    flex: 0 0 92px;
    min-width: 92px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-date-time-row {
    flex-wrap: nowrap;
    gap: 6px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-date-time-row > .ff-quick-pod-date {
    flex: 1 1 150px;
    min-width: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-date-time-row > .ff-quick-pod-time {
    flex: 0 0 82px;
    min-width: 82px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-action .btn {
    width: 100%;
    margin-top: 22px !important;
    white-space: nowrap;
}

@media (max-width: 680px) {
    body.ff-app .ff-waybill.ff-quick-capture .ff-quick-inline-field {
        grid-template-columns: 1fr;
    }

    body.ff-app .ff-waybill.ff-quick-capture .ff-quick-inline-field > label,
    body.ff-app .ff-waybill.ff-quick-capture .ff-quick-inline-field > .ff-control,
    body.ff-app .ff-waybill.ff-quick-capture .ff-quick-inline-field > .ui-select-container,
    body.ff-app .ff-waybill.ff-quick-capture .ff-quick-inline-field > .error {
        grid-column: 1;
    }
}


.custom-dx-table {
    background: var(--ff-surface);
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radius);
    overflow: hidden;
}

    .custom-dx-table thead td,
    .custom-dx-table thead th {
        background: var(--ff-table-head-bg);
        color: var(--ff-table-head-text) !important;
        font-weight: 700;
        letter-spacing: .04em;
        font-size: 12px;
        border-color: var(--nav-border);
    }

    .custom-dx-table tbody td {
        border-color: var(--ff-border);
        vertical-align: middle;
        color: var(--ff-text);
    }

    .custom-dx-table tbody tr:nth-child(even) {
        background: var(--ff-surface-2);
    }

/* =========================================================
   FF WAYBILL – PARCEL GRID (custom-dx-table)
   Uses ONLY your tokens
   Place at end of stylesheet to win cascade.
========================================================= */

body.ff-app .ff-waybill table.custom-dx-table.table {
    /* Grid-local aliases (still driven by your tokens) */
    --grid-bg: var(--surface);
    --grid-border: var(--border);
    --grid-divider: var(--divider);
    --grid-head-bg: var(--primary);
    --grid-head-fg: var(--on-primary);
    --grid-head-sep: color-mix(in srgb, var(--on-primary) 22%, transparent);
    --grid-row-alt: var(--surface-2);
    --grid-row-hover: color-mix(in srgb, var(--primary) 7%, var(--surface));
    --grid-row-focus: color-mix(in srgb, var(--primary) 10%, var(--surface));
    --grid-row-selected: color-mix(in srgb, var(--primary) 14%, var(--surface));
    --grid-muted: var(--text-muted);
    --grid-disabled: var(--text-disabled);
    --grid-danger: var(--error);
    --grid-success: var(--success);
    --grid-warning: var(--warning);
    --grid-focus-ring: var(--focus);
    width: 100%;
    margin: 0 0 14px 0 !important;
    background: var(--grid-bg) !important;
    color: var(--text) !important;
    border: 1px solid var(--grid-border) !important;
    border-radius: var(--radius-md) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden; /* clips corners in most modern browsers */
}

    /* Optional: if corners don’t clip in a browser, wrap the table in a div and use this:
.ff-grid-wrap { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); }
.ff-grid-wrap table { border: 0 !important; margin: 0 !important; }
*/

    /* ---------- HEADER ---------- */
    body.ff-app .ff-waybill table.custom-dx-table.table > thead {
        background: var(--grid-head-bg) !important;
    }

        body.ff-app .ff-waybill table.custom-dx-table.table > thead > tr > th,
        body.ff-app .ff-waybill table.custom-dx-table.table > thead > tr > td {
            /* NOTE: inline !important color in your markup will override this */
            color: var(--grid-head-fg) !important;
            padding: 10px 8px !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            letter-spacing: .08em;
            text-transform: uppercase;
            vertical-align: middle !important;
            border: 0 !important;
            /* single-line separators (no double borders) */
            border-bottom: 1px solid color-mix(in srgb, var(--grid-head-bg) 78%, black) !important;
            border-right: 1px solid var(--grid-head-sep) !important;
        }

        body.ff-app .ff-waybill table.custom-dx-table.table > thead > tr > *:last-child {
            border-right: 0 !important;
        }

    /* ---------- BODY / CELLS ---------- */
    body.ff-app .ff-waybill table.custom-dx-table.table > tbody > tr > th,
    body.ff-app .ff-waybill table.custom-dx-table.table > tbody > tr > td {
        padding: 8px 8px !important;
        color: var(--text) !important;
        background: transparent;
        border: 0 !important;
        border-right: 1px solid var(--grid-divider) !important;
        border-bottom: 1px solid var(--grid-divider) !important;
        vertical-align: middle !important;
    }

    body.ff-app .ff-waybill table.custom-dx-table.table > tbody > tr > *:last-child {
        border-right: 0 !important;
    }

    body.ff-app .ff-waybill table.custom-dx-table.table > tbody > tr:last-child > * {
        border-bottom: 0 !important;
    }

    /* Zebra striping (skip header; applies to body rows) */
    body.ff-app .ff-waybill table.custom-dx-table.table > tbody > tr:nth-child(even) > * {
        background: var(--grid-row-alt);
    }

    /* Hover */
    body.ff-app .ff-waybill table.custom-dx-table.table > tbody > tr:hover > * {
        background: var(--grid-row-hover) !important;
    }

    /* Selected/active row support (use whichever class you already have) */
    body.ff-app .ff-waybill table.custom-dx-table.table > tbody > tr.active > *,
    body.ff-app .ff-waybill table.custom-dx-table.table > tbody > tr.is-selected > * {
        background: var(--grid-row-selected) !important;
    }

    /* Cell highlight when interacting with inputs */
    body.ff-app .ff-waybill table.custom-dx-table.table > tbody td:focus-within {
        background: var(--grid-row-focus) !important;
        box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent);
    }

    /* Make the “entry row” (your first row with inputs) feel intentional */
    body.ff-app .ff-waybill table.custom-dx-table.table > tbody > tr:first-child > * {
        background: var(--surface-2) !important;
    }

    /* ---------- FOOTER (Totals) ---------- */
    body.ff-app .ff-waybill table.custom-dx-table.table > tfoot > tr > th,
    body.ff-app .ff-waybill table.custom-dx-table.table > tfoot > tr > td {
        padding: 10px 8px !important;
        background: var(--surface-3) !important;
        color: var(--text) !important;
        border: 0 !important;
        border-top: 1px solid var(--grid-divider) !important;
    }

    body.ff-app .ff-waybill table.custom-dx-table.table > tfoot .text-right,
    body.ff-app .ff-waybill table.custom-dx-table.table > tfoot .text-center {
        color: var(--text) !important;
    }

    /* ---------- INPUTS INSIDE GRID ---------- */
    body.ff-app .ff-waybill table.custom-dx-table.table input.form-control,
    body.ff-app .ff-waybill table.custom-dx-table.table select.form-control,
    body.ff-app .ff-waybill table.custom-dx-table.table textarea.form-control {
        width: 100%;
        height: 30px !important;
        padding: 6px 8px !important;
        line-height: 1.2 !important;
        border-radius: var(--radius-sm) !important;
        /* Make grid inputs consistent regardless of global input rules */
        background: transparent !important;
        color: var(--text) !important;
        border: 1px solid transparent !important;
        border-bottom-width: 1px !important;
        box-shadow: none !important;
        outline: 0 !important;
        transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    }

    /* Entry row inputs look like “real inputs” by default */
    body.ff-app .ff-waybill table.custom-dx-table.table > tbody > tr:first-child input.form-control {
        background: var(--surface) !important;
        border-color: var(--border) !important;
    }

    /* Focus state */
    body.ff-app .ff-waybill table.custom-dx-table.table input.form-control:focus {
        background: var(--surface) !important;
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 3px var(--grid-focus-ring) !important;
    }

    /* Placeholder */
    body.ff-app .ff-waybill table.custom-dx-table.table input.form-control::placeholder {
        color: var(--text-muted) !important;
    }

    /* Disabled/readonly in grid */
    body.ff-app .ff-waybill table.custom-dx-table.table input.form-control:disabled,
    body.ff-app .ff-waybill table.custom-dx-table.table input.form-control[readonly] {
        background: var(--surface-3) !important;
        color: var(--grid-disabled) !important;
        border-color: var(--divider) !important;
        cursor: not-allowed;
    }

    /* ---------- VALIDATION INSIDE GRID (Angular + bootstrap wrappers) ---------- */
    /* Angular invalid */
    body.ff-app .ff-waybill table.custom-dx-table.table input.form-control.ng-invalid.ng-touched,
    body.ff-app .ff-waybill table.custom-dx-table.table .has-error input.form-control {
        border-color: var(--grid-danger) !important;
    }

        /* Keep error border on hover (beats generic input:hover rules) */
        body.ff-app .ff-waybill table.custom-dx-table.table input.form-control.ng-invalid.ng-touched:hover,
        body.ff-app .ff-waybill table.custom-dx-table.table .has-error input.form-control:hover {
            border-color: var(--grid-danger) !important;
        }

        /* Error focus ring */
        body.ff-app .ff-waybill table.custom-dx-table.table input.form-control.ng-invalid.ng-touched:focus,
        body.ff-app .ff-waybill table.custom-dx-table.table .has-error input.form-control:focus {
            border-color: var(--grid-danger) !important;
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--grid-danger) 28%, transparent) !important;
        }

    /* Success / warning (optional if you use these states) */
    body.ff-app .ff-waybill table.custom-dx-table.table .has-success input.form-control {
        border-color: var(--grid-success) !important;
    }

    body.ff-app .ff-waybill table.custom-dx-table.table .has-warning input.form-control {
        border-color: var(--grid-warning) !important;
    }

    /* Kill legacy dotted error borders inside the grid */
    body.ff-app .ff-waybill table.custom-dx-table.table .has-error .form-control {
        border-style: solid !important;
        border-bottom-style: solid !important;
    }

    /* ---------- ACTION / ICON CELL ---------- */
    body.ff-app .ff-waybill table.custom-dx-table.table .custom-dx-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 999px;
        color: var(--text-muted);
        cursor: pointer;
        user-select: none;
        transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
    }

        body.ff-app .ff-waybill table.custom-dx-table.table .custom-dx-icon:hover {
            background: color-mix(in srgb, var(--primary) 10%, var(--surface));
            color: var(--primary);
        }

        body.ff-app .ff-waybill table.custom-dx-table.table .custom-dx-icon:active {
            background: color-mix(in srgb, var(--primary) 16%, var(--surface));
        }
/* Table shell */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid {
    width: 100%;
    min-width: 1080px;
    margin: 0 !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: fixed;
    overflow: hidden; /* clips corners in most browsers */
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-pieces {
    width: 72px;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-qty {
    width: 62px;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-code {
    width: 112px;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-desc {
    width: auto;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-dim {
    width: 94px;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-volume,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-mass {
    width: 108px;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-value {
    width: 112px;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-action {
    width: 44px;
}

body.ff-app .ff-waybill .ff-parcel-fieldset {
    padding: 0 12px 8px !important;
    margin-bottom: 8px !important;
    overflow: visible;
}

body.ff-app .ff-waybill .ff-parcel-fieldset > legend {
    margin-bottom: 4px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
}

body.ff-app .ff-waybill .ff-parcel-fieldset .container {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill .ff-parcel-fieldset .row.margin-bottom-10 {
    margin-bottom: 0 !important;
}

body.ff-app .ff-waybill .ff-parcel-grid-responsive {
    position: relative;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow-x: auto;
    overflow-y: visible;
}

body.ff-app .ff-waybill .ff-parcel-grid-responsive--dropdowns {
    padding-bottom: 4px;
}

    /* Remove bootstrap double borders inside */
    body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid.table-bordered {
        border-right: 0 !important;
        border-bottom: 0 !important;
    }

/* ---------- THEAD (this is what fixes your light-mode “terrible”) ---------- */
/* Light: integrated surface header, readable text */
body.ff-app:not([data-theme="dark"]) .ff-waybill table.custom-dx-table.ff-parcel-grid > thead {
    background: var(--surface-3) !important;
}

/* Dark: keep your nice dark look */
body.ff-app[data-theme="dark"] .ff-waybill table.custom-dx-table.ff-parcel-grid > thead {
    background: var(--nav-bg-2) !important;
}

/* Header cells */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > thead > tr > th,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > thead > tr > td {
    padding: 5px 4px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    border-right: 1px solid var(--divider) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    line-height: 1.15 !important;
    text-transform: uppercase;
    vertical-align: middle !important;
    white-space: nowrap;
}

/* Header text colors per theme */
body.ff-app:not([data-theme="dark"]) .ff-waybill table.custom-dx-table.ff-parcel-grid > thead > tr > * {
    color: var(--text) !important;
}

body.ff-app[data-theme="dark"] .ff-waybill table.custom-dx-table.ff-parcel-grid > thead > tr > * {
    color: var(--nav-text) !important;
    border-right-color: rgba(255,255,255,0.10) !important;
    border-bottom-color: color-mix(in srgb, var(--border) 65%, transparent) !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > thead > tr > *:last-child {
    border-right: 0 !important;
}

/* ---------- TBODY / CELLS ---------- */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tbody > tr > th,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tbody > tr > td {
    padding: 3px 6px !important;
    color: var(--text) !important;
    border: 0 !important;
    border-right: 1px solid var(--divider) !important;
    border-bottom: 1px solid var(--divider) !important;
    line-height: 1.15 !important;
    vertical-align: middle !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tbody > tr > *:last-child {
    border-right: 0 !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tbody > tr:last-child > * {
    border-bottom: 0 !important;
}

/* Zebra + hover tuned for BOTH themes */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tbody > tr:nth-child(even) > * {
    background: var(--surface-2) !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tbody > tr:hover > * {
    background: color-mix(in srgb, var(--primary) 6%, var(--surface)) !important;
}

/* Entry row (first row) is intentional */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tbody > tr.ff-parcel-grid-entryrow > * {
    background: var(--surface-2) !important;
}

/* Highlight cell while editing */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tbody td:focus-within {
    background: color-mix(in srgb, var(--primary) 8%, var(--surface)) !important;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 28%, transparent);
}

/* ---------- Inputs inside grid (form-control + custom-form-control) ---------- */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid input.form-control,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid input.custom-form-control,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid textarea.form-control,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid select.form-control {
    width: 100%;
    height: 24px !important;
    min-height: 24px !important;
    padding: 2px 6px !important;
    border-radius: var(--radius-sm) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
    outline: 0 !important;
    font-size: 13px !important;
    line-height: 18px !important;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    /* Focus ring uses your token */
    body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid input.form-control:focus,
    body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid input.custom-form-control:focus {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 3px var(--focus) !important;
    }

/* Disabled state */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid input:disabled {
    background: var(--surface-3) !important;
    color: var(--text-disabled) !important;
    border-color: var(--divider) !important;
}

/* ---------- ui-select in grid (match token inputs) ---------- */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .ui-select-bootstrap .ui-select-search {
    height: 24px !important;
    min-height: 24px !important;
    padding: 2px 22px 2px 6px !important;
    border-radius: var(--radius-sm) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
    font-size: 13px !important;
    line-height: 18px !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .ui-select-bootstrap > .ui-select-match > .btn {
    position: relative;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .ui-select-bootstrap > .ui-select-match > .btn > .btn-link {
    align-items: center;
    display: inline-flex;
    height: 14px;
    justify-content: center;
    line-height: 14px;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .ui-select-bootstrap > .ui-select-match > .btn > .btn-link .glyphicon {
    line-height: 1;
    top: 0;
}

    body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .ui-select-bootstrap > .ui-select-match > .btn:focus,
    body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .ui-select-bootstrap .ui-select-search:focus {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 3px var(--focus) !important;
    }

/* ---------- Validation in grid (Angular + bootstrap wrappers) ---------- */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid input.ng-invalid.ng-touched,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .has-error input {
    border-color: var(--error) !important;
}

    body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid input.ng-invalid.ng-touched:focus,
    body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .has-error input:focus {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 28%, transparent) !important;
    }

/* Kill legacy dotted borders inside this table */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .has-error .form-control {
    border-style: solid !important;
    border-bottom-style: solid !important;
}

/* ---------- Action icons ---------- */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .custom-dx-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

    body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .custom-dx-icon:hover {
        background: color-mix(in srgb, var(--primary) 10%, var(--surface));
        color: var(--primary);
    }

/* ---------- Footer totals row ---------- */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tfoot > tr > th,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tfoot > tr > td {
    padding: 5px 6px !important;
    background: var(--surface-3) !important;
    color: var(--text) !important;
    border: 0 !important;
    border-top: 1px solid var(--divider) !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tfoot > tr > th:first-child {
    padding-left: 2px !important;
    padding-right: 2px !important;
    text-align: center !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tfoot > tr > th:first-child .margin-left-20,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tfoot > tr > th:first-child .margin-right-20,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tfoot > tr > th:first-child .margin-right-5 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tfoot > tr > th:first-child span + span {
    margin-left: 5px !important;
}

/* ---------- OPTIONAL: STICKY HEADER (requires a scroll wrapper) ----------
.ff-grid-wrap { max-height: 360px; overflow: auto; }
.ff-grid-wrap table.custom-dx-table thead > tr > * { position: sticky; top: 0; z-index: 2; }
----------------------------------------------------------------------- */
/* =========================================================
   PARCEL DETAILS GRID – token based (light + dark)
========================================================= */

/* Column sizing moved out of inline styles */
body.ff-app .ff-waybill .ff-col-code {
    min-width: 112px;
}

body.ff-app .ff-waybill .ff-col-desc {
    min-width: 150px;
}

body.ff-app .ff-waybill .ff-col-actions {
    width: 44px;
    min-width: 44px;
}

body.ff-app .ff-waybill.ff-quick-capture table.custom-dx-table.ff-parcel-grid > thead > tr > td:last-child,
body.ff-app .ff-waybill.ff-quick-capture table.custom-dx-table.ff-parcel-grid > tbody > tr > td:last-child,
body.ff-app .ff-waybill.ff-quick-capture table.custom-dx-table.ff-parcel-grid > tfoot > tr > th:last-child {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    text-align: center;
}

/* Add button (plus) – token based */
body.ff-app .ff-waybill #addNewParcel.ff-parcel-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 4px;
    right: 10px;
    z-index: 3;
    float: none !important;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0 !important;
    border-radius: 999px;
    background: var(--primary) !important;
    color: var(--on-primary) !important;
    border: 1px solid color-mix(in srgb, var(--primary) 70%, black) !important;
    box-shadow: var(--shadow-1);
}

    body.ff-app .ff-waybill #addNewParcel.ff-parcel-add:hover {
        background: var(--primary-hover) !important;
    }

    body.ff-app .ff-waybill #addNewParcel.ff-parcel-add:active {
        background: var(--primary-active) !important;
    }

    body.ff-app .ff-waybill #addNewParcel.ff-parcel-add:focus {
        outline: 0 !important;
        box-shadow: 0 0 0 3px var(--focus), var(--shadow-1) !important;
    }



/* Toggle icon in header */
body.ff-app .ff-waybill .ff-parcel-grid-toggle {
    font-weight: 400;
    cursor: pointer;
    margin-left: 6px !important;
    color: color-mix(in srgb, var(--text-muted) 85%, var(--primary)) !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .margin-left-25 {
    margin-left: 6px !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tfoot .margin-left-20,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tfoot .margin-right-20 {
    margin-left: 6px !important;
    margin-right: 6px !important;
}

body.ff-app[data-theme="dark"] .ff-waybill .ff-parcel-grid-toggle {
    color: color-mix(in srgb, var(--nav-text-muted) 85%, var(--primary)) !important;
}

body.ff-app .ff-waybill .ff-parcel-grid-toggle:hover {
    color: var(--primary) !important;
}



/* =========================================================
   GLOBAL TOP BAR (PAGE HEADER) – unified + long-label safe
   Applies everywhere via #page-title.ff-page-header
   Uses ONLY your tokens
========================================================= */

/* --- 0) Neutralize legacy #page-title rules that fight the new header --- */
body.ff-app #page-title {
    background: transparent !important;
    border-bottom: 0 !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

    /* --- 1) Header shell (consistent across all pages/themes) --- */
    body.ff-app #page-title.ff-page-header {
        background: var(--surface) !important;
        border-bottom: 1px solid var(--border) !important;
        box-shadow: var(--shadow-1) !important;
        padding: 12px 14px !important;
        margin: 0 0 12px 0 !important;
    }

        /* Inner row: subtle “production” polish (works in light + dark via tokens) */
/*        body.ff-app #page-title.ff-page-header .ff-page-header-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px 16px;
            flex-wrap: wrap;
            background: var(--surface) !important;
            padding: 10px 12px !important;
            border-radius: calc(var(--radius-md) - 2px) !important;
            box-shadow: inset 0 1px 0 color-mix(in srgb, var(--border) 55%, white) !important;
        }*/

        /* --- 2) Title area (stable, clean, consistent) --- */
        body.ff-app #page-title.ff-page-header .ff-page-title-wrap {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 240px;  /*keeps layout stable as toolbar wraps*/
        }

        body.ff-app #page-title.ff-page-header .ff-page-title {
            margin: 0 !important;
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--text) !important;
            font-weight: 750;
            font-size: 22px;
            letter-spacing: .02em;
            line-height: 1.1;
            text-transform: uppercase;
        }

        body.ff-app #page-title.ff-page-header .ff-page-subtitle {
            color: var(--text-muted);
            font-weight: 700;
            letter-spacing: .08em;
            opacity: .9;
        }

        /* Favourite/star button */
        body.ff-app #page-title.ff-page-header .ff-fav-btn,
        body.ff-app #page-title.ff-page-header .ff-icon-btn {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--text);
            padding: 0;
            transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
        }

            body.ff-app #page-title.ff-page-header .ff-fav-btn:hover,
            body.ff-app #page-title.ff-page-header .ff-icon-btn:hover {
                background: var(--surface-2);
                border-color: color-mix(in srgb, var(--border) 80%, black);
                transform: translateY(-1px);
            }

            body.ff-app #page-title.ff-page-header .ff-fav-btn:active,
            body.ff-app #page-title.ff-page-header .ff-icon-btn:active {
                transform: translateY(0);
                background: var(--surface-3);
            }

            body.ff-app #page-title.ff-page-header .ff-fav-btn:focus,
            body.ff-app #page-title.ff-page-header .ff-icon-btn:focus {
                box-shadow: 0 0 0 3px var(--focus);
            }

        /* --- 3) Toolbar layout --- */
        body.ff-app #page-title.ff-page-header .ff-toolbar {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: 8px;
            margin-left: auto !important;
            text-align: right;
        }

        body.ff-app .ff-finance.ff-capture-page:not(.ff-supplier-invoice) #page-title.ff-page-header .ff-page-title-wrap,
        body.ff-app .ff-view-crdr #page-title.ff-page-header .ff-page-title-wrap {
            flex: 0 0 auto;
        }

        body.ff-app .ff-finance.ff-capture-page:not(.ff-supplier-invoice) #page-title.ff-page-header .ff-toolbar,
        body.ff-app .ff-view-crdr #page-title.ff-page-header .ff-toolbar {
            flex: 1 1 auto;
            justify-content: flex-end !important;
            margin-left: auto !important;
            min-width: 0;
        }

            /* --- 4) Actions (THIS is the big win for long labels) --- */
            /* Icon on top + label underneath, consistent sizing */
            body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action,
            body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle {
                width: 96px;  /*uniform + looks like your “old production” toolbar */
                height: 56px !important;  /*enough for 2-line labels */
                padding: 8px 10px !important;
                display: inline-flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 6px !important;
                border-radius: var(--radius-md) !important;
                border: 1px solid var(--border) !important;
                background: var(--surface) !important;
                color: var(--text) !important;
                text-align: center;
                user-select: none;
                box-shadow: none !important;
                transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
            }

                body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action:hover,
                body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle:hover {
                    background: var(--surface-2) !important;
                    border-color: color-mix(in srgb, var(--border) 80%, black) !important;
                    transform: translateY(-1px);
                }

                body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action:active,
                body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle:active {
                    transform: translateY(0);
                    background: var(--surface-3) !important;
                }

                body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action:focus,
                body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle:focus {
                    box-shadow: 0 0 0 3px var(--focus) !important;
                }

                /* Icon + label styling */
                body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action i,
                body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle i {
                    font-size: 16px !important;
                    line-height: 1 !important;
                    color: currentColor !important;
                }

            body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action-label {
                font-size: 11px !important;
                font-weight: 750 !important;
                line-height: 1.05 !important;
                letter-spacing: .06em;
                text-transform: uppercase;
                color: currentColor !important;
                 /*keep long labels tidy*/
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            body.ff-app #page-title.ff-page-header .ff-toolbar a.dropdown-toggle:has(.sparkline):has(.values) {
                width: 96px;
                height: 56px;
                padding: 8px 10px;
                display: inline-flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 6px;
                border-radius: var(--radius-md);
                border: 1px solid var(--border);
                background: var(--surface);
                color: var(--text) !important;
                text-align: center;
            }

            body.ff-app #page-title.ff-page-header .ff-toolbar a.dropdown-toggle:has(.values p) .values p {
                margin: 0;
                font-size: 11px;
                font-weight: 750;
                line-height: 1.05;
                letter-spacing: .06em;
                text-transform: uppercase;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                color: currentColor !important;
            }


            /* Primary action */
            body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary {
                background: var(--primary) !important;
                border-color: var(--primary) !important;
                color: var(--on-primary) !important;
            }

                body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary:hover {
                    background: var(--primary-hover) !important;
                }

                body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary:active {
                    background: var(--primary-active) !important;
                }

                body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary:focus {
                    box-shadow: 0 0 0 3px var(--focus), var(--shadow-1) !important;
                }

                body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary[disabled],
                body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary:disabled {
                    opacity: .55 !important;
                    transform: none !important;
                    box-shadow: none !important;
                }

            /* Danger action (works even if some pages use .btn-danger instead) */
            body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-danger,
            body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.btn-danger {
                border-color: color-mix(in srgb, var(--error) 55%, var(--border)) !important;
                color: var(--error) !important;
                background: color-mix(in srgb, var(--error) 6%, var(--surface)) !important;
            }

                body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-danger:hover,
                body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.btn-danger:hover {
                    background: color-mix(in srgb, var(--error) 10%, var(--surface)) !important;
                    border-color: color-mix(in srgb, var(--error) 70%, var(--border)) !important;
                }

        /* --- 5) Dropdown menu polish (token based) --- */
        body.ff-app #page-title.ff-page-header .dropdown-menu {
            background: var(--surface) !important;
            border: 1px solid var(--border) !important;
            border-radius: var(--radius-md) !important;
            box-shadow: var(--shadow-1) !important;
            padding: 6px !important;
        }

            body.ff-app #page-title.ff-page-header .dropdown-menu .liLine {
                border-bottom: 1px solid var(--divider) !important;
                padding: 8px 10px !important;
                line-height: 1.2 !important;
            }

                body.ff-app #page-title.ff-page-header .dropdown-menu .liLine:last-child {
                    border-bottom: 0 !important;
                }

            body.ff-app #page-title.ff-page-header .dropdown-menu label {
                color: var(--text) !important;
                font-weight: 650;
            }

        /* Disabled action buttons (works for <button>, <a>, and .btn btn-o patterns) */
        body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action[disabled],
        body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action:disabled,
        body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle[disabled],
        body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle:disabled,
        body.ff-app #page-title.ff-page-header .ff-toolbar .btn[disabled],
        body.ff-app #page-title.ff-page-header .ff-toolbar .btn:disabled,
        body.ff-app #page-title.ff-page-header .ff-toolbar .btn.disabled,
        body.ff-app #page-title.ff-page-header fieldset[disabled] .ff-toolbar .btn {
            cursor: not-allowed !important;
            pointer-events: none !important; /* prevents dropdown toggles firing */
            opacity: 0.55 !important;
            background: var(--surface-2) !important;
            border-color: var(--divider) !important;
            color: var(--text-disabled) !important;
            transform: none !important;
            box-shadow: none !important;
            filter: none !important;
        }

            /* Ensure icon + label inherit the disabled color (your sparkline/values structure) */
            /*body.ff-app #page-title.ff-page-header .ff-toolbar .btn[disabled] i,
            body.ff-app #page-title.ff-page-header .ff-toolbar .btn:disabled i,
            body.ff-app #page-title.ff-page-header .ff-toolbar .btn[disabled] p,
            body.ff-app #page-title.ff-page-header .ff-toolbar .btn:disabled p,
            body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action[disabled] i,
            body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action:disabled i,
            body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action[disabled] .ff-action-label,
            body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action:disabled .ff-action-label {
                color: var(--text-disabled) !important;
            }*/

        body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action i,
        body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action .fa,
        body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action .ff-action-label,
        body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle i,
        body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle .fa,
        body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle .sparkline,
        body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle .values,
        body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle .values p,
        body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle .caret {
            color: currentColor !important;
        }

body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-chart-toolbar-action {
    min-width: 56px !important;
    width: 56px !important;
    padding: 8px 10px !important;
}

    body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-chart-toolbar-action i {
        color: var(--primary) !important;
        font-size: 18px !important;
    }

body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-dashboard-menu-toggle {
    min-width: 56px !important;
    width: 56px !important;
    padding: 8px 10px !important;
}

    body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-dashboard-menu-toggle i {
        color: var(--primary) !important;
        font-size: 17px !important;
    }

body.ff-app .ff-dashboard #page-title.ff-page-header {
    padding-bottom: 4px !important;
    padding-top: 4px !important;
}

body.ff-app .ff-dashboard #page-title.ff-page-header .ff-page-header-row {
    align-items: center !important;
    min-height: 0 !important;
}

body.ff-app .ff-dashboard #page-title.ff-page-header .ff-toolbar {
    gap: 6px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-dashboard #page-title.ff-page-header {
    margin-bottom: 6px !important;
    padding: 3px 10px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-dashboard #page-title.ff-page-header .ff-page-title {
    font-size: 18px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-dashboard #page-title.ff-page-header .ff-fav-btn,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-dashboard #page-title.ff-page-header .ff-icon-btn {
    height: 26px !important;
    width: 26px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-dashboard #page-title.ff-page-header .ff-toolbar {
    gap: 4px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-dashboard #page-title.ff-page-header .ff-toolbar .ff-action,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-dashboard #page-title.ff-page-header .ff-toolbar .dropdown-toggle {
    gap: 2px !important;
    height: 34px !important;
    padding: 3px 4px !important;
    width: 58px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-dashboard #page-title.ff-page-header .ff-toolbar .ff-action.ff-chart-toolbar-action,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-dashboard #page-title.ff-page-header .ff-toolbar .ff-action.ff-dashboard-menu-toggle {
    min-width: 34px !important;
    width: 34px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-dashboard #page-title.ff-page-header .ff-toolbar .ff-action i,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-dashboard #page-title.ff-page-header .ff-toolbar .dropdown-toggle i {
    font-size: 13px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-dashboard #page-title.ff-page-header .ff-toolbar .ff-action-label {
    font-size: 8px !important;
    letter-spacing: .02em !important;
    line-height: 1 !important;
    -webkit-line-clamp: 1 !important;
}


/* --- 6) Mobile/smaller widths: allow a tighter button width automatically --- */
@media (max-width: 1200px) {
    body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action:not(.ff-chart-toolbar-action):not(.ff-dashboard-menu-toggle),
    body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle {
        width: 88px;
    }
}


/* =========================================================
   TOPBAR RIGHT NAV (Enterprise polish) – token-only
   No HTML changes. Put at END of stylesheet.
========================================================= */

@media (min-width: 768px) {

    /* ---------- 1) Layout / rhythm ---------- */
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 12px 0 0 !important;
        padding: 0 !important;
        height: auto !important;
    }

        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li {
            float: none !important;
        }

            /* Topbar “control system” */
            body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li > a {
                --tb-ctl-h: 34px;
                --tb-ctl-pad-x: 10px;
                --tb-ctl-radius: 999px;
                --tb-ctl-border: color-mix(in srgb, var(--topbar-text) 16%, transparent);
                --tb-ctl-bg: color-mix(in srgb, var(--topbar-bg) 20%, transparent);
                --tb-ctl-bg-hover: color-mix(in srgb, var(--topbar-hover) 35%, transparent);
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 8px !important;
                height: var(--tb-ctl-h) !important;
                padding: 0 var(--tb-ctl-pad-x) !important;
                border-radius: var(--tb-ctl-radius) !important;
                border: 1px solid var(--tb-ctl-border) !important;
                background: var(--tb-ctl-bg) !important;
                color: var(--topbar-text) !important;
                opacity: 1 !important;
                font-size: 12px !important;
                font-weight: 650 !important;
                letter-spacing: .02em !important;
                text-transform: none !important; /* enterprise: stop shouting */

                line-height: 1 !important;
                white-space: nowrap !important;
                transition: background-color .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease;
            }

                body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li > a:hover {
                    background: var(--tb-ctl-bg-hover) !important;
                    border-color: color-mix(in srgb, var(--topbar-text) 24%, transparent) !important;
                    transform: translateY(-1px);
                }

                body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li > a:active {
                    transform: none;
                }

                body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li > a:focus-visible {
                    outline: 0 !important;
                    box-shadow: 0 0 0 3px var(--focus) !important;
                }

                /* ---------- 2) Icons: stop inline margin-top + normalize sizes ---------- */
                body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li > a i {
                    display: inline-block !important;
                    margin: 0 !important;
                    font-size: 16px !important; /* consistent */
                    line-height: 1 !important;
                    color: currentColor !important;
                    transform: translateY(0) !important; /* cancel inline “margin-top” */
                }

                /* The two icon-only items (dash toggle + helpdesk): turn into true icon buttons */
                body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li > a > span.title {
                    display: inline-flex !important;
                    align-items: center !important;
                    justify-content: center !important;
                    width: 32px !important;
                    height: 32px !important;
                }

            /* ---------- 3) Favourite Pages: reduce shoutiness + unify styling ---------- */
            /* Normalize label + star; override inline gold and large font-size */
            body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.dropdown > a.ng-binding {
                font-weight: 700 !important;
                letter-spacing: .04em !important;
                text-transform: uppercase !important; /* just this one can stay “label-like” */
                padding: 0 12px !important;
            }

                body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.dropdown > a.ng-binding > i.fa-star {
                    color: var(--warning) !important; /* token, not hardcoded gold */
                    font-size: 16px !important; /* override inline 26px */
                }

            /* Make Favourite Pages “quieter” at rest, more visible on hover */
            body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.dropdown > a.ng-binding {
                background: color-mix(in srgb, var(--topbar-bg) 14%, transparent) !important;
                border-color: color-mix(in srgb, var(--topbar-text) 14%, transparent) !important;
            }

                body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.dropdown > a.ng-binding:hover {
                    background: color-mix(in srgb, var(--topbar-hover) 38%, transparent) !important;
                }

            /* ---------- 4) User chip: make it look “account control”, not a random button ---------- */
            body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.current-user > a {
                padding: 0 10px !important;
                gap: 10px !important;
                font-weight: 650 !important;
            }

                body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.current-user > a img {
                    width: 26px !important;
                    height: 26px !important;
                    border-radius: 999px !important;
                    border: 1px solid color-mix(in srgb, var(--topbar-text) 18%, transparent) !important;
                    margin: 0 !important;
                }

                body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.current-user > a .username,
                body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.current-user > a .text-username {
                    color: var(--topbar-text) !important; /* beats legacy .text-username forcing white */
                    display: inline-flex !important;
                    align-items: center !important;
                    gap: 6px !important;
                    margin: 0 !important;
                    line-height: 1 !important;
                }

            /* Optional enterprise separator before account cluster (subtle) */
            body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.current-user {
                margin-left: 6px !important;
                padding-left: 10px !important;
                position: relative;
            }

                body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.current-user:before {
                    content: "" !important;
                    position: absolute;
                    left: 0;
                    top: 50%;
                    width: 1px;
                    height: 18px;
                    transform: translateY(-50%);
                    background: color-mix(in srgb, var(--topbar-text) 14%, transparent);
                }

    /* ---------- 5) Dropdown menus: unify, fix padding, fix separators ---------- */
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu,
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu.dropdown-light,
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu.dropdown-dark {
        background: var(--surface) !important;
        color: var(--text) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-md) !important;
        box-shadow: var(--shadow-1) !important;
        padding: 6px !important;
        margin-top: 10px !important;
        min-width: 220px !important;
        z-index: 1060 !important;
    }

        /* ✅ KILL the “black triangle” pointer / default caret/arrow (the big offender) */
        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu:before,
        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu:after,
        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu.dropdown-dark:before,
        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu.dropdown-dark:after,
        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu.dropdown-light:before,
        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu.dropdown-light:after {
            display: none !important;
            content: none !important;
            border: 0 !important;
        }

        /* Clean dropdown rows */
        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu .liLine {
            border: 0 !important;
            padding: 0 !important;
            line-height: normal !important;
        }

        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu > li > a {
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            padding: 10px 10px !important;
            border-radius: var(--radius-sm) !important;
            color: var(--text) !important;
            background: transparent !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            white-space: nowrap !important;
        }

            body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu > li > a:hover {
                background: var(--surface-2) !important;
            }

        /* Add subtle dividers between items (enterprise menu feel) */
        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu > li + li > a {
            border-top: 1px solid var(--divider) !important;
        }
}

/* Dark mode: ensure dropdowns still look correct */
body.ff-app[data-theme="dark"] .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu,
body.ff-app[data-theme="dark"] .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu.dropdown-light,
body.ff-app[data-theme="dark"] .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu.dropdown-dark {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* =========================================================
   TOPBAR – density pass (reduce vertical space)
   No HTML changes
========================================================= */

@media (min-width: 768px) {

    /* 1) Reduce overall navbar vertical padding */
    body.ff-app .ff-shell .navbar-header,
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg {
        min-height: 44px !important;
    }

    /* 2) Tighten the "top-left square" (brand / togglers) */
    body.ff-app .ff-shell .navbar-header {
        display: flex !important;
        align-items: center !important;
        padding: 6px 10px !important;
        gap: 10px !important;
    }

        /* Brand/logo should not set the bar height */
        body.ff-app .ff-shell .navbar-header .navbar-brand img {
            max-height: 30px !important; /* was 50px */
            max-width: 160px !important;
        }

        /* Make the toggler buttons match the compact system */
        body.ff-app .ff-shell .navbar-header .btn.btn-navbar,
        body.ff-app .ff-shell .navbar-header .sidebar-toggler,
        body.ff-app .ff-shell .navbar-header .sidebar-mobile-toggler,
        body.ff-app .ff-shell .navbar-header #menu-toggler {
            height: 32px !important;
            width: 32px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 !important;
            border-radius: 999px !important;
            border: 1px solid color-mix(in srgb, var(--topbar-text) 16%, transparent) !important;
            background: color-mix(in srgb, var(--topbar-bg) 16%, transparent) !important;
        }

    /* 3) Tighten right controls you already styled */
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li > a {
        height: 32px !important; /* was 34 */
        padding: 0 9px !important; /* slightly tighter */
    }

        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li > a > span.title {
            width: 28px !important;
            height: 28px !important;
        }

    /* 4) Tab/history chips: make them fit the compact bar */
    body.ff-app .ff-historybar-wrap {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
        /* If your tab-bar partial uses common "pill/chip" classes, this will help.
     Adjust selectors to match your chip class if needed. */
        body.ff-app .ff-historybar-wrap .btn,
        body.ff-app .ff-historybar-wrap a,
        body.ff-app .ff-historybar-wrap .nav > li > a {
            height: 30px !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            display: inline-flex !important;
            align-items: center !important;
        }

    /* 5) Reduce banner visual weight (if you’re using gradient/image) */
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg {
        background-position: center !important;
        background-size: cover !important;
    }
}

/* =========================================================
   TOP BAR – hard override (actually shrinks + fixes left togglers)
   Place at END of stylesheet.
========================================================= */

@media (min-width: 768px) {

    /* 1) Force the actual navbar row height */
    body.ff-app .navbar,
    body.ff-app .ff-shell .navbar,
    body.ff-app .ff-shell .ff-topnav,
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg {
        min-height: 44px !important;
        height: 44px !important;
    }

    /* 2) Header (top-left block) must not set its own tall height */
    body.ff-app .navbar-header {
        height: 44px !important;
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

        /* Logo must not dictate height */
        body.ff-app .navbar-header .navbar-brand {
            height: 44px !important;
            padding: 0 10px !important;
            display: inline-flex !important;
            align-items: center !important;
        }

            body.ff-app .navbar-header .navbar-brand img {
                max-height: 28px !important; /* key shrink */
                max-width: 160px !important;
            }

        /* 3) Make the LEFT togglers look like proper icon buttons (and stop the weird blobs) */
        body.ff-app .navbar-header a.sidebar-mobile-toggler,
        body.ff-app .navbar-header a.sidebar-toggler,
        body.ff-app .navbar-header a#menu-toggler {
            width: 32px !important;
            height: 32px !important;
            padding: 0 !important;
            margin: 0 !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 999px !important;
            border: 1px solid color-mix(in srgb, var(--topbar-text) 16%, transparent) !important;
            background: color-mix(in srgb, var(--topbar-bg) 18%, transparent) !important;
            box-shadow: none !important;
            color: var(--topbar-text) !important;
            text-decoration: none !important;
        }

            /* Kill any inline-ish icon offsets so they center */
            body.ff-app .navbar-header a.sidebar-mobile-toggler i,
            body.ff-app .navbar-header a.sidebar-toggler i,
            body.ff-app .navbar-header a#menu-toggler i {
                margin-top: 0 !important;
                font-size: 18px !important;
                line-height: 1 !important;
            }

    /* If bootstrap visibility utilities are misbehaving, enforce them */
    @media (min-width: 992px) {
        body.ff-app .navbar-header a.sidebar-mobile-toggler {
            display: none !important;
        }
    }

    @media (min-width: 768px) {
        body.ff-app .navbar-header a#menu-toggler {
            display: none !important;
        }
    }

    /* 4) Blue bar content (right side) */
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg {
        padding: 0 12px !important;
        display: flex !important;
        align-items: center !important;
    }

        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right {
            margin: 0 0 0 auto !important;
            height: 44px !important;
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
        }

            body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li > a {
                height: 32px !important;
                line-height: 32px !important;
                padding: 0 10px !important;
                display: inline-flex !important;
                align-items: center !important;
                border-radius: 999px !important;
            }

                /* Remove the inline icon vertical nudges in the right nav too */
                body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li > a i {
                    margin-top: 0 !important;
                }
}

/* If you use --ff-topbar-height for fixed offsets, update it to match the new height */
body.ff-app {
    --ff-topbar-height: 44px;
}

/* =========================================================
   TOPBAR FIX: respect Bootstrap hidden/visible togglers again
   Paste AFTER your existing topbar shrink block.
========================================================= */

/* Desktop / tablet */
@media (min-width: 768px) {
    /* Hide the XS menu toggler on non-XS */
    body.ff-app .navbar-header a#menu-toggler {
        display: none !important;
    }
}

/* Large screens: show ONLY the desktop sidebar toggler */
@media (min-width: 992px) {
    body.ff-app .navbar-header a.sidebar-toggler {
        display: inline-flex !important;
    }

    body.ff-app .navbar-header a.sidebar-mobile-toggler {
        display: none !important;
    }
}

/* Small/medium: show ONLY the mobile sidebar toggler */
@media (max-width: 991px) {
    body.ff-app .navbar-header a.sidebar-mobile-toggler {
        display: inline-flex !important;
    }

    body.ff-app .navbar-header a.sidebar-toggler {
        display: none !important;
    }
}

/* IMPORTANT: stop our styling from “reviving” hidden buttons */
body.ff-app .navbar-header a.sidebar-mobile-toggler,
body.ff-app .navbar-header a.sidebar-toggler,
body.ff-app .navbar-header a#menu-toggler {
    /* keep sizing/shape, but DO NOT force display with !important here */
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    align-items: center;
    justify-content: center;
}

    /* Kill the inline-ish vertical nudges so icons center */
    body.ff-app .navbar-header a.sidebar-mobile-toggler i,
    body.ff-app .navbar-header a.sidebar-toggler i,
    body.ff-app .navbar-header a#menu-toggler i {
        margin-top: 0 !important;
        line-height: 1 !important;
    }

body.ff-app .navbar-header a.sidebar-toggler.ff-sidebar-toggler--busy {
    cursor: progress;
    pointer-events: none;
}

body.ff-app .navbar-header a.sidebar-toggler.ff-sidebar-toggler--busy i {
    color: var(--primary);
}

body.ff-app .navbar-header a.ff-support-screenshot-btn {
    align-items: center;
    border-radius: 999px;
    color: inherit;
    display: inline-flex;
    float: right;
    height: 32px;
    justify-content: center;
    margin: 0 4px 0 0;
    opacity: .68;
    padding: 0;
    width: 32px;
}

@media (min-width: 768px) {
    body.ff-app .ff-shell .ff-topnav .navbar-header {
        flex: 0 0 70px !important;
        justify-content: center !important;
        max-width: 70px !important;
        min-width: 70px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 70px !important;
    }

    body.ff-app .navbar-header a.ff-support-screenshot-btn {
        flex: 0 0 32px;
        margin: 0 !important;
    }
}

body.ff-app .navbar-header a.ff-support-screenshot-btn {
    order: 20;
}

body.ff-app .navbar-header a.sidebar-mobile-toggler,
body.ff-app .navbar-header a.sidebar-toggler,
body.ff-app .navbar-header a#menu-toggler {
    order: 21;
}

body.ff-app .navbar-header a.ff-support-screenshot-btn:hover,
body.ff-app .navbar-header a.ff-support-screenshot-btn:focus {
    background: rgba(0,0,0,.06);
    opacity: 1;
    text-decoration: none;
}

body.ff-app .navbar-header a.ff-support-screenshot-btn i {
    font-size: 15px;
    line-height: 1 !important;
    margin: 0 !important;
}

body.ff-app .navbar-header a.ff-support-screenshot-btn.ff-support-screenshot-btn--busy {
    cursor: progress;
    opacity: 1;
    pointer-events: none;
}

body.ff-app .navbar-header a.ff-support-screenshot-btn.ff-support-screenshot-btn--busy i {
    color: var(--primary);
}

body.ff-app .swal2-container .swal2-popup.ff-support-mail-dialog .swal2-confirm.swal2-styled {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
}

body.ff-app .swal2-container .swal2-popup.ff-support-mail-dialog .swal2-confirm.swal2-styled:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

body.ff-app .swal2-container .swal2-popup.ff-support-mail-success .swal2-confirm.swal2-styled {
    background: #dff3d7 !important;
    border-color: #95cf82 !important;
    color: var(--text) !important;
}

body.ff-app .swal2-container .swal2-popup.ff-support-mail-success .swal2-confirm.swal2-styled:hover {
    background: #d3edc8 !important;
    border-color: #7fbd6a !important;
}

@media (min-width: 992px) {
    .app-navbar-fixed {
        padding-top: 44px;
    }
}

.ff-shell #sidebar .ff-nav-menu, .ff-shell #sidebar .main-navigation-menu {
    padding: 0 0 !important;
}

#sidebar > div nav > ul li a i[class*="ti-"] {
    margin-right: 0;
}

body.ff-app .app-sidebar-closed #sidebar nav > ul.main-navigation-menu > li.active > a .item-media i, body.ff-app #app.app-sidebar-closed #sidebar nav > ul.main-navigation-menu > li.active > a .item-media i {
  color: #fff !important;
}

/* Primary action polish (Save) */
body.ff-app .ff-action.ff-action-primary {
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.08)), var(--primary) !important;
    border-color: rgba(0,0,0,.12) !important;
    color: var(--on-primary) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, var(--shadow-1) !important;
    transition: transform .08s ease, box-shadow .15s ease, filter .15s ease;
}

    body.ff-app .ff-action.ff-action-primary:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, var(--shadow-2) !important;
        filter: saturate(1.08);
    }

    body.ff-app .ff-action.ff-action-primary:active:not(:disabled) {
        transform: translateY(0);
        box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, var(--shadow-1) !important;
        filter: saturate(1.02);
    }

    body.ff-app .ff-action.ff-action-primary:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0,0,0,.08), 0 0 0 6px rgba(255,255,255,.35), var(--shadow-2) !important;
    }

    body.ff-app .ff-action.ff-action-primary:disabled {
        cursor: not-allowed;
        opacity: .55;
        filter: saturate(.75);
    }

div.ff-page-body.ng-isolate-scope[block-ui="BlockUI"] {
    padding: 0 20px;
}

/* =========================================================
   PRIMITIVE: action chip (for header tools)
========================================================= */
body.ff-app .ff-action {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
}

    body.ff-app .ff-action:hover {
        background: var(--surface-2) !important;
    }
.ff-dash-button{
    padding: 0 0 0 0;
}
.ff-dash-button > a {
    padding: 5px !important;
}

.ff-dash-button .panel-body {
    padding: 14px 0 !important;
}


/* footer/version row layout */
.ff-login-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* subtle toggle next to version */
.login-theme-toggle--meta {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: .75;
    transition: opacity .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}

    .login-theme-toggle--meta:hover {
        opacity: 1;
        background: color-mix(in srgb, var(--text) 6%, transparent);
        border-color: var(--border);
    }

    .login-theme-toggle--meta:active {
        transform: translateY(1px);
    }

    .login-theme-toggle--meta:focus {
        outline: none;
        box-shadow: 0 0 0 3px var(--focus);
    }

#login-box.ff-login .login-theme-toggle--meta {
    position: static !important;
    top: auto !important;
    right: auto !important;
}


/* --- Login footer meta row: 3 items, perfectly aligned --- */
#login-box.ff-login .ff-login-meta {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 6px 14px;
    gap: 10px;
}

/* ensure each cell centers vertically */
#login-box.ff-login .ff-login-meta__item {
    display: flex;
    align-items: center;
    min-height: 28px;
}

#login-box.ff-login .ff-login-meta__left {
    justify-content: flex-start;
}

#login-box.ff-login .ff-login-meta__center {
    justify-content: center;
}

#login-box.ff-login .ff-login-meta__right {
    justify-content: flex-end;
}

/* kill the old baseline offset that makes copyright sit “lower/higher” */
#login-box.ff-login #copyright {
    padding-bottom: 0 !important;
}

/* --- Sliding theme switch (2 obvious states) --- */
#login-box.ff-login .ff-theme-switch {
    position: static !important;
    width: 54px;
    height: 28px;
    padding: 2px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    box-shadow: none;
    transition: background .15s ease, border-color .15s ease;
}

#login-box.ff-login .ff-theme-switch__thumb {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 2px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s ease, background .15s ease, color .15s ease;
}

/* LIGHT state */
#login-box.ff-login .ff-theme-switch:not(.is-dark) {
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

/* DARK state */
#login-box.ff-login .ff-theme-switch.is-dark {
    background: color-mix(in srgb, var(--primary) 18%, var(--surface));
}

    #login-box.ff-login .ff-theme-switch.is-dark .ff-theme-switch__thumb {
        transform: translateX(26px);
        background: var(--primary);
        color: var(--surface);
    }

/* Ensure the li behaves like a topbar icon slot */
body.ff-app .ff-topnav-bg .nav.navbar-right > li.ff-topnav-theme {
    height: var(--ff-topbar-height);
    display: flex;
    align-items: center;
    padding: 0 8px;
}

/* Topbar switch sizing + visuals */
body.ff-app .ff-theme-switch.ff-theme-switch--topbar {
    width: 42px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

    body.ff-app .ff-theme-switch.ff-theme-switch--topbar .ff-theme-switch__thumb {
        width: 20px;
        height: 20px;
        border-radius: 999px;
        background: var(--surface);
        border: 1px solid var(--border); /* the visible ring you wanted */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transform: translateX(2px);
        transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
    }

        body.ff-app .ff-theme-switch.ff-theme-switch--topbar .ff-theme-switch__thumb .fa {
            font-size: 12px;
            color: var(--text-muted);
        }

    /* Dark state */
    body.ff-app .ff-theme-switch.ff-theme-switch--topbar.is-dark {
        background: color-mix(in srgb, var(--primary) 28%, var(--surface-2));
        border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    }

        body.ff-app .ff-theme-switch.ff-theme-switch--topbar.is-dark .ff-theme-switch__thumb {
            transform: translateX(20px);
            background: var(--primary);
            border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
        }

            body.ff-app .ff-theme-switch.ff-theme-switch--topbar.is-dark .ff-theme-switch__thumb .fa {
                color: var(--on-primary);
            }

    body.ff-app .ff-theme-switch.ff-theme-switch--topbar:focus {
        outline: none;
        box-shadow: 0 0 0 3px var(--focus);
    }

body.ff-app .ff-topnav-bg .nav.navbar-right > li.ff-topnav-grid-font,
body.ff-app .ff-topnav-bg .nav.navbar-right > li.ff-topnav-grid-density {
    height: var(--ff-topbar-height);
    display: flex;
    align-items: center;
    padding: 0 4px;
}

body.ff-app .ff-grid-font-toggle,
body.ff-app .ff-grid-density-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 28px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
}

body.ff-app .ff-grid-font-toggle__button,
body.ff-app .ff-grid-density-toggle__button {
    width: 24px;
    height: 22px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

body.ff-app .ff-grid-font-toggle__button:hover,
body.ff-app .ff-grid-density-toggle__button:hover {
    background: var(--topbar-hover);
    color: var(--text);
}

body.ff-app .ff-grid-font-toggle__button:focus,
body.ff-app .ff-grid-density-toggle__button:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus);
}

body.ff-app .ff-grid-font-toggle__button.is-active,
body.ff-app .ff-grid-density-toggle__button.is-active {
    background: var(--primary);
    color: var(--on-primary);
}

body.ff-app .ff-grid-font-toggle__button--small .fa {
    font-size: 10px;
}

body.ff-app .ff-grid-font-toggle__button--normal .fa {
    font-size: 12px;
}

body.ff-app .ff-grid-font-toggle__button--large .fa {
    font-size: 15px;
}

@media (min-width: 768px) {
    body.ff-app .ff-shell header.ff-topnav.navbar {
        display: flex !important;
        align-items: center !important;
        gap: 4px;
        width: 100%;
        overflow: visible;
    }

    body.ff-app .ff-shell .ff-topnav .navbar-header {
        flex: 0 0 auto;
        order: 1;
    }

    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap {
        border-bottom: 0 !important;
        flex: 1 1 auto;
        margin: 0 !important;
        min-width: 0;
        order: 2;
        overflow: hidden;
        padding-left: 4px !important;
        padding-right: 6px !important;
    }

    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap .history-tabs,
    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs,
    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #history-tabs-inner {
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        padding-left: 4px;
        padding-right: 4px;
    }

    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li {
        flex: 0 0 auto;
        min-width: 0;
    }

    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page {
        flex: 1 1 124px;
        max-width: 150px;
    }

    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page > a {
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-action > a {
        justify-content: center;
        min-width: 30px;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg {
        flex: 0 0 auto;
        margin-left: auto !important;
        min-width: 0;
        order: 3;
        padding-left: 6px !important;
        padding-right: 6px !important;
        width: auto !important;
    }

    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right {
        gap: 4px !important;
        margin-right: 0 !important;
    }

    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li > a {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.ff-topnav-favourites > a {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 32px !important;
    }

    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.ff-topnav-favourites > a > i.fa-star {
        color: var(--warning) !important;
        font-size: 16px !important;
    }

    body.ff-app .ff-topnav-bg .nav.navbar-right > li.ff-topnav-theme,
    body.ff-app .ff-topnav-bg .nav.navbar-right > li.ff-topnav-grid-font,
    body.ff-app .ff-topnav-bg .nav.navbar-right > li.ff-topnav-grid-density {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.current-user {
        margin-left: 3px !important;
        padding-left: 5px !important;
    }

    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.current-user > a {
        gap: 6px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page {
        max-width: 120px;
    }

    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.current-user > a .username,
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.current-user > a .text-username {
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (min-width: 768px) and (max-width: 1000px) {
    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page {
        max-width: 94px;
    }

    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.current-user > a .username,
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.current-user > a .text-username {
        max-width: 78px;
    }
}

.form-group{
    margin-bottom: 0;
}

fieldset{
    padding: 0 16px 16px 16px !important;
    margin: 0 0 8px 0 !important;
}

/* 1) Legend becomes a neutral "chip row" (no pill styling on legend itself) */
body.ff-app .ff-waybill fieldset > legend.ff-sr-legend {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    /* remove the pill look from the legend container */
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    border: 0 !important;
    background: transparent !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* 2) Text gets the "legend pill" styling instead */
body.ff-app .ff-waybill .ff-sr-legend__text {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 10px !important;
    border: 1px solid var(--divider) !important;
    border-radius: 999px !important;
    background: var(--surface-2) !important;
    color: var(--text-muted) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

/* 3) Button becomes its own separate bubble pill */
body.ff-app .ff-waybill .ff-sr-legend .ff-sr-clear {
    position: static !important;
    margin: 0 !important;
    transform: translateY(0) !important;
    opacity: .85;
    border-color: color-mix(in srgb, var(--error) 55%, var(--border)) !important;
    color: var(--error) !important;
    background: color-mix(in srgb, var(--error) 6%, var(--surface)) !important;
}

/* 4) Icon-only sizing (slightly larger reads better as its own bubble) */
body.ff-app .ff-waybill .ff-action.ff-action--icon {
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    opacity: 80%;
}
    body.ff-app .ff-waybill .ff-action.ff-action--icon:hover{
        opacity: 100%;
    }

    body.ff-app .ff-waybill .ff-action.ff-action--icon i {
        font-size: 13px !important;
        line-height: 1 !important;
    }

    /* keep ng-show/ng-hide reliable */
body.ff-app .ff-waybill .ff-action.ff-action--icon.ng-hide,
body.ff-app .ff-waybill .ff-action.ff-action--icon.ng-hide:not(.ng-hide-animate) {
    display: none !important;
}

body.ff-app .ff-action.ff-action--icon.ff-sr-switch {
    padding: 14px 28px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-action.ff-action--icon.ff-sr-switch {
    padding: 0 !important;
}

/* Busy filter rows should wrap into clean columns instead of allowing controls to collide. */
body.ff-app .ff-waybill .ff-waybill-filter-grid {
    display: grid;
    grid-template-columns:
        minmax(150px, 180px)
        minmax(165px, 190px)
        minmax(170px, 210px)
        minmax(248px, 260px)
        minmax(180px, 220px);
    justify-content: start;
    column-gap: 18px;
    row-gap: 12px;
    align-items: end;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill .ff-waybill-filter-grid::before,
body.ff-app .ff-waybill .ff-waybill-filter-grid::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill .ff-waybill-filter-grid > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill .ff-waybill-filter-grid .form-group {
    margin-bottom: 0;
}

body.ff-app .ff-waybill .ff-waybill-filter-grid .form-control,
body.ff-app .ff-waybill .ff-waybill-filter-grid .ff-control,
body.ff-app .ff-waybill .ff-waybill-filter-grid .ui-select-container {
    width: 100%;
    max-width: 100%;
}

body.ff-app .ff-waybill .ff-waybill-filter-grid textarea.form-control,
body.ff-app .ff-waybill .ff-filter-flow-row textarea.form-control,
body.ff-app .ff-waybill .ff-filter-inline-row textarea.form-control {
    height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    overflow-y: auto;
    resize: none;
}

body.ff-app .ff-waybill .ff-waybill-filter-grid .ff-filter-date-range .range-picker {
    max-width: 248px;
}

body.ff-app .ff-waybill .ff-waybill-filter-grid .ff-filter-branch {
    min-width: 0;
}

body.ff-app .ff-waybill .ff-filter-flow-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 18px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill .ff-filter-flow-row::before,
body.ff-app .ff-waybill .ff-filter-flow-row::after,
body.ff-app .ff-waybill .ff-filter-inline-row::before,
body.ff-app .ff-waybill .ff-filter-inline-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill .ff-filter-flow-row > [class*="col-"],
body.ff-app .ff-waybill .ff-filter-inline-row > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill .ff-filter-flow-row .form-group,
body.ff-app .ff-waybill .ff-filter-inline-row .form-group {
    margin-bottom: 0;
}

body.ff-app .ff-waybill .ff-filter-flow-row .form-control,
body.ff-app .ff-waybill .ff-filter-flow-row .ff-control,
body.ff-app .ff-waybill .ff-filter-flow-row .ui-select-container,
body.ff-app .ff-waybill .ff-filter-inline-row .form-control,
body.ff-app .ff-waybill .ff-filter-inline-row .ff-control,
body.ff-app .ff-waybill .ff-filter-inline-row .ui-select-container {
    width: 100%;
    max-width: 100%;
}

body.ff-app .ff-waybill .ff-filter-inline-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-field {
    flex: 0 1 220px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-party {
    flex: 1 1 300px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-client {
    flex: 0 1 240px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-agent,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-driver,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-town,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-hub,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-service,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-route,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-schedule,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-box,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-user {
    flex: 0 1 210px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-invoice {
    flex: 0 1 168px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-branch,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-area {
    flex: 0 1 155px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-vehicle,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-ref,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-order,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-manifest-no,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-courier,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-parcel-desc {
    flex: 0 1 160px;
}

body.ff-app .ff-waybill .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-waybill .ff-filter-client-row > .ff-filter-order {
    flex: 1 1 132px;
    min-width: 118px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-capture-method,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-user {
    flex: 0 1 210px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-parcel-desc {
    flex-basis: 260px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-acc,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-receiver-acc,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-internal-id {
    flex: 0 1 112px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-zone {
    flex: 0 1 88px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-ring-code {
    flex: 0 1 105px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-bool,
body.ff-app .ff-waybill .ff-filter-inline-row > .ff-filter-bool {
    flex: 0 1 86px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-bool-wide,
body.ff-app .ff-waybill .ff-filter-inline-row > .ff-filter-bool-wide {
    flex: 0 1 112px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-extra-group,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-pc-kgs-group {
    flex: 0 1 auto;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-bool-group {
    flex: 1 1 100%;
}

body.ff-app .ff-waybill .ff-filter-inline-row > .ff-filter-capture-method {
    flex: 0 1 170px;
}

body.ff-app .ff-waybill .ff-filter-inline-row > .ff-filter-security {
    flex-basis: 76px;
}

body.ff-app .ff-waybill .ff-filter-inline-row > .ff-filter-pc,
body.ff-app .ff-waybill .ff-filter-inline-row > .ff-filter-kgs {
    flex: 0 1 86px;
}

body.ff-app .ff-waybill .ff-filter-admin-id-row > .ff-filter-waybill-id {
    order: 0;
    margin-left: 0;
}

body.ff-app .ff-waybill .ff-filter-admin-id-row > .ff-filter-quote-id {
    order: 0;
    margin-left: 0;
}

body.ff-app .ff-waybill .ff-filter-acc label,
body.ff-app .ff-waybill .ff-filter-receiver-acc label,
body.ff-app .ff-waybill .ff-filter-zone label,
body.ff-app .ff-waybill .ff-filter-ref label,
body.ff-app .ff-waybill .ff-filter-order label {
    white-space: nowrap;
}

body.ff-app .ff-waybill .ff-filter-actions-row {
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill .ff-filter-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill .ff-filter-actions::before,
body.ff-app .ff-waybill .ff-filter-actions::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill .ff-filter-actions .btn,
body.ff-app .ff-waybill .ff-filter-actions .valuesonly,
body.ff-app .ff-waybill .ff-filter-actions .checkbox {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-waybill .ff-filter-actions .btn {
    flex: 0 0 auto;
}

body.ff-app .ff-waybill .ff-filter-actions .valuesonly {
    display: inline-flex;
    align-items: center;
}

body.ff-app .ff-waybill .ff-filter-actions .ff-filter-clear {
    order: 1;
}

body.ff-app .ff-waybill .ff-filter-actions .ff-filter-show-dormant {
    order: 2;
}

body.ff-app .ff-waybill .ff-filter-actions .ff-filter-keep-open {
    order: 4;
    margin-left: auto !important;
}

body.ff-app .ff-waybill .ff-filter-actions:not(:has(.ff-filter-keep-open)) .ff-filter-search {
    margin-left: auto !important;
}

body.ff-app .ff-waybill .ff-filter-actions:not(:has(.ff-filter-keep-open)) .ff-filter-close {
    margin-left: auto !important;
}

body.ff-app .ff-waybill .ff-filter-actions:not(:has(.ff-filter-keep-open)) .ff-filter-close + .ff-filter-search {
    margin-left: 0 !important;
}

body.ff-app .ff-waybill .ff-filter-actions .ff-filter-close {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    order: 5;
    padding-left: 0;
    padding-right: 0;
    width: var(--ff-control-h);
}

body.ff-app .ff-waybill .ff-filter-actions .ff-filter-search {
    order: 6;
}

body.ff-app .ff-view-waybills .ff-sr-card {
    padding: 0 10px 6px 10px !important;
    margin-bottom: 4px !important;
}

body.ff-app .ff-view-waybills fieldset > legend.ff-sr-legend {
    margin-bottom: 4px !important;
}

body.ff-app .ff-view-waybills .ff-sr-legend__text {
    padding: 4px 8px !important;
}

body.ff-app .ff-view-waybills .ff-filter-actions-slot--bottom {
    display: block !important;
}

body.ff-app .ff-view-waybills .ff-filter-actions-slot--top .ff-filter-actions-row {
    margin-bottom: 4px;
}

body.ff-app .ff-view-waybills .ff-filter-actions-slot--top .ff-filter-actions {
    gap: 6px 10px;
    margin-bottom: 0 !important;
}

body.ff-app .ff-view-waybills .ff-filter-actions-slot--top .btn {
    min-height: var(--ff-control-h);
    padding-top: 5px;
    padding-bottom: 5px;
}

body.ff-app .ff-view-waybills .ff-waybill-filter-grid {
    grid-template-columns:
        minmax(140px, 165px)
        minmax(150px, 175px)
        minmax(165px, 190px)
        minmax(236px, 248px)
        minmax(150px, 180px);
    align-items: start;
    column-gap: 10px;
    row-gap: 4px;
    margin-bottom: 4px;
}

body.ff-app .ff-view-waybills .ff-filter-flow-row,
body.ff-app .ff-view-waybills .ff-filter-inline-row {
    gap: 6px 10px;
    margin-bottom: 4px;
}

body.ff-app .ff-view-waybills .ff-filter-flow-row:last-of-type,
body.ff-app .ff-view-waybills .ff-filter-inline-row:last-of-type {
    margin-bottom: 0;
}

body.ff-app .ff-view-waybills .ff-filter-flow-row label,
body.ff-app .ff-view-waybills .ff-filter-inline-row label,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid label {
    display: block;
    line-height: 18px;
    margin-bottom: 1px;
    min-height: 20px;
    white-space: nowrap;
}

body.ff-app .ff-view-waybills .ff-filter-flow-row label [json-dbl],
body.ff-app .ff-view-waybills .ff-filter-inline-row label [json-dbl],
body.ff-app .ff-view-waybills .ff-waybill-filter-grid label [json-dbl] {
    margin-left: 6px;
}

body.ff-app .ff-view-waybills .ff-filter-flow-row .ff-control,
body.ff-app .ff-view-waybills .ff-filter-inline-row .ff-control,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid .ff-control,
body.ff-app .ff-view-waybills .ff-filter-flow-row .ui-select-container,
body.ff-app .ff-view-waybills .ff-filter-inline-row .ui-select-container,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid .ui-select-container,
body.ff-app .ff-view-waybills .ff-filter-flow-row .form-control,
body.ff-app .ff-view-waybills .ff-filter-inline-row .form-control,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid .form-control {
    height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h);
    max-height: var(--ff-control-h) !important;
    box-sizing: border-box;
}

body.ff-app .ff-view-waybills .ff-filter-flow-row textarea.form-control,
body.ff-app .ff-view-waybills .ff-filter-inline-row textarea.form-control,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid textarea.form-control {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    overflow-y: auto;
    resize: none;
    white-space: pre-wrap;
}

body.ff-app .ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap > .ui-select-match > .btn {
    height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    align-items: center;
    display: flex;
    line-height: 1.2 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap,
body.ff-app .ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap > .ui-select-match,
body.ff-app .ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap,
body.ff-app .ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap > .ui-select-match,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap > .ui-select-match {
    height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap .ui-select-search,
body.ff-app .ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap .ui-select-search,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-search {
    height: calc(var(--ff-control-h) - 2px) !important;
    min-height: calc(var(--ff-control-h) - 2px) !important;
    max-height: calc(var(--ff-control-h) - 2px) !important;
    line-height: 1.2 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap .ui-select-placeholder,
body.ff-app .ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap .ui-select-placeholder,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-placeholder {
    display: block;
    line-height: 1.2 !important;
    max-height: calc(var(--ff-control-h) - 4px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ff-app .ff-view-waybills .ff-filter-flow-row .dx-texteditor,
body.ff-app .ff-view-waybills .ff-filter-inline-row .dx-texteditor,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid .dx-texteditor {
    height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-waybills .ff-filter-flow-row .dx-texteditor-container,
body.ff-app .ff-view-waybills .ff-filter-inline-row .dx-texteditor-container,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid .dx-texteditor-container,
body.ff-app .ff-view-waybills .ff-filter-flow-row .dx-texteditor-input,
body.ff-app .ff-view-waybills .ff-filter-inline-row .dx-texteditor-input,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid .dx-texteditor-input {
    height: calc(var(--ff-control-h) - 2px) !important;
    min-height: calc(var(--ff-control-h) - 2px) !important;
    max-height: calc(var(--ff-control-h) - 2px) !important;
}

body.ff-app .ff-view-waybills .ff-filter-flow-row .dx-texteditor-input,
body.ff-app .ff-view-waybills .ff-filter-inline-row .dx-texteditor-input,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid .dx-texteditor-input {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1px 4px;
    margin: 0;
    min-height: 32px;
    padding: 0 270px 0 0;
}

body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row::before,
body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row .label,
body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row .btn,
body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row .checkbox,
body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row .checkbox-inline,
body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row .valuesonly {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row .label {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
}

body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row .btn {
    min-height: 30px;
    padding: 4px 9px;
}

body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row .ff-grid-option-show-values,
body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row .ff-grid-filter-exceptions {
    margin-left: 4px !important;
}

body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row .clip-check label {
    line-height: 22px;
    margin-right: 4px !important;
}

body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row .skinny-checkbox-inline .checkbox {
    display: inline-flex;
    align-items: center;
}

body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row .clip-check label {
    padding-left: 25px !important;
}

body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row .clip-check label:after {
    left: 2px !important;
}

body.ff-app .ff-view-waybills .ff-view-waybills-grid-row {
    margin-top: 0;
}

body.ff-app .ff-view-waybills .ff-view-waybills-grid-row > .col-md-12 {
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-header-panel {
    background: transparent;
    border-bottom: 0;
    margin-bottom: 0;
    margin-top: -32px;
    min-height: 32px;
    pointer-events: none;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-header-panel .dx-toolbar {
    background: transparent;
    min-height: 32px;
    padding: 0;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-header-panel .dx-toolbar-items-container {
    height: 32px;
    min-height: 32px;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-header-panel .dx-toolbar-after {
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: auto;
    right: 0;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-header-panel .dx-toolbar-item {
    padding: 0 2px;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-header-panel .dx-button {
    margin: 0;
}

body.ff-app .ff-view-waybills #pageInfoBadge {
    padding: 0 2px !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-headers {
    margin-top: 0;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-headers .dx-datagrid-filter-row > td,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-headers .dx-datagrid-filter-row > tr > td {
    box-sizing: border-box;
    overflow: hidden !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    min-height: 30px;
    padding: 2px 4px;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-page-sizes,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-pages {
    align-items: center;
    display: inline-flex;
    margin: 0 0 0 6px;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-info {
    margin: 0 6px;
    padding: 2px 4px;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-page,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-page-size,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-navigate-button {
    line-height: 20px;
    margin: 0 1px;
    min-height: 24px;
    padding: 2px 6px;
}

body.ff-app[data-grid-font-size="normal"] .ff-view-waybills {
    --ff-grid-row-height: 16px;
    --ff-grid-cell-padding-x: 4px;
    --ff-grid-cell-padding-y: 0;
    --ff-grid-header-padding-y: 1px;
}

body.ff-app[data-grid-font-size="normal"] .ff-view-waybills #gridContainer .dx-datagrid-headers .dx-header-row > td,
body.ff-app[data-grid-font-size="normal"] .ff-view-waybills #gridContainer .dx-datagrid-total-footer .dx-row > td,
body.ff-app[data-grid-font-size="normal"] .ff-view-waybills #gridContainer .dx-datagrid-filter-row > td {
    font-size: 12px !important;
    line-height: 1.15 !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    vertical-align: middle !important;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills {
    --ff-control-h: 28px;
    --ff-grid-row-height: 16px;
    --ff-grid-cell-padding-x: 4px;
    --ff-grid-cell-padding-y: 0;
    --ff-grid-header-padding-y: 1px;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row label,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row label,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid label {
    font-size: 11px;
    height: 16px;
    line-height: 14px;
    margin-bottom: 0;
    max-height: 16px;
    min-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row label [json-dbl],
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row label [json-dbl],
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid label [json-dbl] {
    display: inline-block;
    float: right;
    line-height: 14px;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row .ff-control,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row .ff-control,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid .ff-control,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row .form-control,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row .form-control,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid .form-control,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row .ui-select-container,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row .ui-select-container,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid .ui-select-container,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row .dx-texteditor,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row .dx-texteditor,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid .dx-texteditor,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row .dx-texteditor-input,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row .dx-texteditor-input,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid .dx-texteditor-input {
    box-sizing: border-box;
    font-size: 11px;
    height: var(--ff-control-h) !important;
    line-height: 1.2 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row .ui-select-match,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row .ui-select-match,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid .ui-select-match {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap > .ui-select-match > .btn {
    align-items: center;
    display: flex;
    font-size: 11px !important;
    height: var(--ff-control-h) !important;
    line-height: 1.2 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap .ui-select-search,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap .ui-select-search,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-search {
    font-size: 11px !important;
    height: calc(var(--ff-control-h) - 2px) !important;
    line-height: 1.2 !important;
    max-height: calc(var(--ff-control-h) - 2px) !important;
    min-height: calc(var(--ff-control-h) - 2px) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap .ui-select-match-text,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap .ui-select-placeholder,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap .ui-select-match-text,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap .ui-select-placeholder,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-match-text,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-placeholder {
    align-items: center;
    display: flex;
    height: calc(var(--ff-control-h) - 2px);
    line-height: 1.2 !important;
    max-height: calc(var(--ff-control-h) - 2px);
    min-height: 0;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row textarea.form-control,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row textarea.form-control,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid textarea.form-control {
    height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-view-waybills-grid-toolbar-row {
    font-size: 11px;
    min-height: 28px;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-view-waybills-grid-toolbar-row .label {
    min-height: 20px;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-view-waybills-grid-toolbar-row .btn {
    font-size: 11px;
    min-height: 24px;
    padding: 2px 7px;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-view-waybills-grid-toolbar-row .clip-check label {
    font-size: 11px;
    line-height: 20px;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-headers .dx-header-row > td,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-total-footer .dx-row > td,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-filter-row > td {
    font-size: 11px !important;
    line-height: 1.12 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    vertical-align: middle !important;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-filter-row .dx-texteditor,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-filter-row .dx-texteditor-container,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-filter-row .dx-texteditor-input,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-search-panel .dx-texteditor-input {
    font-size: 11px !important;
    min-height: 22px;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-rowsview .dx-button,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-rowsview .dx-button-content {
    min-height: 16px;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-rowsview .dx-button-content {
    padding: 0 2px;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid .dx-checkbox,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid .dx-checkbox-container,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid .dx-checkbox-icon {
    height: 12px !important;
    min-height: 12px !important;
    width: 12px !important;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-pager {
    font-size: 11px;
    min-height: 26px;
    padding-top: 1px;
    padding-bottom: 1px;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-page,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-page-size,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-navigate-button {
    line-height: 18px;
    min-height: 20px;
    padding: 1px 5px;
}

body.ff-app[data-grid-font-size="large"] .ff-view-waybills {
    --ff-control-h: 28px;
    --ff-grid-row-height: 16px;
    --ff-grid-cell-padding-x: 4px;
    --ff-grid-cell-padding-y: 0;
    --ff-grid-header-padding-y: 1px;
}

body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-flow-row label,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-inline-row label,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-waybill-filter-grid label {
    font-size: 13px;
    line-height: 18px;
    min-height: 21px;
}

body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-flow-row .ff-control,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-inline-row .ff-control,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-waybill-filter-grid .ff-control,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-flow-row .form-control,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-inline-row .form-control,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-waybill-filter-grid .form-control,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-flow-row .ui-select-container,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-inline-row .ui-select-container,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-waybill-filter-grid .ui-select-container,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-flow-row .dx-texteditor,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-inline-row .dx-texteditor,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-waybill-filter-grid .dx-texteditor,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-flow-row .dx-texteditor-input,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-inline-row .dx-texteditor-input,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-waybill-filter-grid .dx-texteditor-input {
    font-size: 14px;
    height: var(--ff-control-h);
    min-height: var(--ff-control-h);
}

body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-flow-row textarea.form-control,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-inline-row textarea.form-control,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-waybill-filter-grid textarea.form-control {
    height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-view-waybills-grid-toolbar-row {
    font-size: 13px;
    min-height: 34px;
}

body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-view-waybills-grid-toolbar-row .btn {
    font-size: 13px;
    min-height: 32px;
    padding: 5px 10px;
}

body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-view-waybills-grid-toolbar-row .clip-check label {
    font-size: 13px;
    line-height: 24px;
}

body.ff-app[data-grid-font-size="large"] .ff-view-waybills #gridContainer .dx-datagrid-headers .dx-header-row > td,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills #gridContainer .dx-datagrid-total-footer .dx-row > td,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills #gridContainer .dx-datagrid-filter-row > td {
    font-size: 15px !important;
    line-height: 1.2 !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    vertical-align: middle !important;
}

body.ff-app[data-grid-font-size="large"] .ff-view-waybills #gridContainer .dx-datagrid-filter-row .dx-texteditor,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills #gridContainer .dx-datagrid-filter-row .dx-texteditor-container,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills #gridContainer .dx-datagrid-filter-row .dx-texteditor-input,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills #gridContainer .dx-datagrid-search-panel .dx-texteditor-input {
    font-size: 15px !important;
    min-height: 30px;
}

body.ff-app[data-grid-font-size="large"] .ff-view-waybills #gridContainer .dx-datagrid .dx-checkbox,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills #gridContainer .dx-datagrid .dx-checkbox-container,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills #gridContainer .dx-datagrid .dx-checkbox-icon {
    height: 22px !important;
    width: 22px !important;
}

body.ff-app[data-grid-font-size="large"] .ff-view-waybills #gridContainer .dx-datagrid-pager {
    font-size: 14px;
}

body.ff-app .ff-view-compact .ff-sr-card {
    padding: 0 10px 6px 10px !important;
    margin-bottom: 4px !important;
}

body.ff-app .ff-view-compact fieldset > legend.ff-sr-legend {
    margin-bottom: 4px !important;
}

body.ff-app .ff-view-compact .ff-sr-legend__text {
    padding: 4px 8px !important;
}

body.ff-app .ff-view-compact .ff-filter-actions-slot--bottom {
    display: block !important;
}

body.ff-app .ff-view-compact .ff-filter-actions-slot--top .ff-filter-actions-row {
    margin-bottom: 4px;
}

body.ff-app .ff-view-compact .ff-filter-actions-slot--top .ff-filter-actions {
    gap: 6px 10px;
    margin-bottom: 0 !important;
}

body.ff-app .ff-view-compact .ff-filter-actions-slot--top .btn {
    min-height: var(--ff-control-h);
    padding-top: 5px;
    padding-bottom: 5px;
}

body.ff-app .ff-view-compact .ff-waybill-filter-grid {
    grid-template-columns:
        minmax(140px, 165px)
        minmax(150px, 175px)
        minmax(165px, 190px)
        minmax(236px, 248px)
        minmax(150px, 180px);
    column-gap: 10px;
    row-gap: 4px;
    margin-bottom: 4px;
}

body.ff-app .ff-view-compact .ff-filter-flow-row,
body.ff-app .ff-view-compact .ff-filter-inline-row {
    gap: 6px 10px;
    margin-bottom: 4px;
}

body.ff-app .ff-view-compact .ff-filter-flow-row:last-of-type,
body.ff-app .ff-view-compact .ff-filter-inline-row:last-of-type {
    margin-bottom: 0;
}

body.ff-app .ff-view-compact .ff-filter-flow-row label,
body.ff-app .ff-view-compact .ff-filter-inline-row label,
body.ff-app .ff-view-compact .ff-waybill-filter-grid label {
    display: block;
    line-height: 18px;
    margin-bottom: 1px;
    min-height: 20px;
    white-space: nowrap;
}

body.ff-app .ff-view-compact .ff-filter-flow-row label [json-dbl],
body.ff-app .ff-view-compact .ff-filter-inline-row label [json-dbl],
body.ff-app .ff-view-compact .ff-waybill-filter-grid label [json-dbl] {
    margin-left: 6px;
}

body.ff-app .ff-view-compact .ff-filter-flow-row .ff-control,
body.ff-app .ff-view-compact .ff-filter-inline-row .ff-control,
body.ff-app .ff-view-compact .ff-waybill-filter-grid .ff-control,
body.ff-app .ff-view-compact .ff-filter-flow-row .ui-select-container,
body.ff-app .ff-view-compact .ff-filter-inline-row .ui-select-container,
body.ff-app .ff-view-compact .ff-waybill-filter-grid .ui-select-container,
body.ff-app .ff-view-compact .ff-filter-flow-row .form-control,
body.ff-app .ff-view-compact .ff-filter-inline-row .form-control,
body.ff-app .ff-view-compact .ff-waybill-filter-grid .form-control {
    min-height: var(--ff-control-h);
}

body.ff-app .ff-view-compact .ff-filter-flow-row textarea.form-control,
body.ff-app .ff-view-compact .ff-filter-inline-row textarea.form-control,
body.ff-app .ff-view-compact .ff-waybill-filter-grid textarea.form-control,
body.ff-app .ff-view-compact .accordion-no-display fieldset textarea.autoExpand {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    overflow-y: auto;
    resize: none;
    white-space: pre-wrap;
}

body.ff-app .ff-view-compact .ff-filter-flow-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-view-compact .ff-filter-inline-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-view-compact .ff-waybill-filter-grid .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-view-compact .ff-filter-flow-row .dx-texteditor,
body.ff-app .ff-view-compact .ff-filter-inline-row .dx-texteditor,
body.ff-app .ff-view-compact .ff-waybill-filter-grid .dx-texteditor,
body.ff-app .ff-view-compact .ff-filter-flow-row .dx-texteditor-input,
body.ff-app .ff-view-compact .ff-filter-inline-row .dx-texteditor-input,
body.ff-app .ff-view-compact .ff-waybill-filter-grid .dx-texteditor-input {
    min-height: var(--ff-control-h);
}

body.ff-app .ff-view-compact .ff-grid-toolbar-row {
    margin: 0;
}

body.ff-app .ff-view-compact .ff-grid-toolbar-row > .ff-grid-toolbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1px 4px;
    min-height: 32px;
    padding: 0 220px 0 0;
}

body.ff-app .ff-view-compact .ff-grid-toolbar-row .label,
body.ff-app .ff-view-compact .ff-grid-toolbar-row .btn,
body.ff-app .ff-view-compact .ff-grid-toolbar-row .ff-btn,
body.ff-app .ff-view-compact .ff-grid-toolbar-row .checkbox,
body.ff-app .ff-view-compact .ff-grid-toolbar-row .checkbox-inline,
body.ff-app .ff-view-compact .ff-grid-toolbar-row .valuesonly {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-view-compact .ff-grid-toolbar-row .label {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
}

body.ff-app .ff-view-compact .ff-grid-toolbar-row .btn,
body.ff-app .ff-view-compact .ff-grid-toolbar-row .ff-btn {
    min-height: 30px;
    padding: 4px 9px;
}

body.ff-app .ff-view-compact .ff-grid-toolbar-row .ff-grid-option-show-values {
    margin-left: 4px !important;
}

body.ff-app .ff-view-compact .ff-grid-toolbar-row .ff-grid-toolbar-back {
    margin-left: auto !important;
}

body.ff-app .ff-view-compact .ff-grid-toolbar-row .clip-check label {
    line-height: 22px;
    margin-right: 4px !important;
    padding-left: 25px !important;
}

body.ff-app .ff-view-compact .ff-grid-toolbar-row .clip-check label:after {
    left: 2px !important;
}

body.ff-app .ff-view-compact .ff-grid-result-row {
    margin-top: 0;
}

body.ff-app .ff-view-compact .ff-grid-result-row > .col-md-12 {
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-header-panel {
    background: transparent;
    border-bottom: 0;
    margin-bottom: 0;
    margin-top: -32px;
    min-height: 32px;
    pointer-events: none;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-header-panel .dx-toolbar {
    background: transparent;
    min-height: 32px;
    padding: 0;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-header-panel .dx-toolbar-items-container {
    height: 32px;
    min-height: 32px;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-header-panel .dx-toolbar-after {
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: auto;
    right: 0;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-header-panel .dx-toolbar-item {
    padding: 0 2px;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-header-panel .dx-button {
    margin: 0;
}

body.ff-app .ff-view-compact #pageInfoBadge {
    padding: 0 2px !important;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-headers {
    margin-top: 0;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    min-height: 30px;
    padding: 2px 4px;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager .dx-page-sizes,
body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager .dx-pages {
    align-items: center;
    display: inline-flex;
    margin: 0 0 0 6px;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager .dx-info {
    margin: 0 6px;
    padding: 2px 4px;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager .dx-page,
body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager .dx-page-size,
body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager .dx-navigate-button {
    line-height: 20px;
    margin: 0 1px;
    min-height: 24px;
    padding: 2px 6px;
}

body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-header-panel {
    background: transparent;
    border-bottom: 0;
    margin-bottom: 0;
    margin-top: -32px;
    min-height: 32px;
    pointer-events: none;
}

body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-header-panel .dx-toolbar {
    background: transparent;
    min-height: 32px;
    padding: 0;
}

body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-header-panel .dx-toolbar-items-container {
    height: 32px;
    min-height: 32px;
}

body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-header-panel .dx-toolbar-after {
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: auto;
    right: 0;
}

body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-header-panel .dx-toolbar-item {
    padding: 0 2px;
}

body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-header-panel .dx-button {
    margin: 0;
}

body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-headers {
    margin-top: 0;
}

body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    min-height: 30px;
    padding: 2px 4px;
}

body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-page-sizes,
body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-pages {
    align-items: center;
    display: inline-flex;
    margin: 0 0 0 6px;
}

body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-info {
    margin: 0 6px;
    padding: 2px 4px;
}

body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-page,
body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-page-size,
body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-navigate-button {
    line-height: 20px;
    margin: 0 1px;
    min-height: 24px;
    padding: 2px 6px;
}

body.ff-app .ff-view-compact .ff-sr-card > .row {
    margin-bottom: 4px;
}

body.ff-app .ff-view-compact .ff-sr-card > .row:last-child {
    margin-bottom: 0;
}

body.ff-app .ff-view-compact .ff-sr-card .form-group {
    margin-bottom: 4px;
}

body.ff-app .ff-view-compact .ff-sr-card .row:last-child > .col-md-12 {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    justify-content: flex-end;
    margin-bottom: 0 !important;
}

body.ff-app .ff-view-compact .ff-sr-card .row:last-child .checkbox,
body.ff-app .ff-view-compact .ff-sr-card .row:last-child .btn {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-view-collections .ff-grid-status-filters {
    align-items: center;
    display: flex;
    float: none !important;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: auto;
}

body.ff-app .ff-view-collections .ff-grid-status-filters .label {
    line-height: 18px;
}

body.ff-app .ff-view-collections .ff-grid-toolbar-row > .ff-grid-toolbar-inner {
    padding-right: 190px;
}

body.ff-app .ff-view-collections .ff-grid-result-row .dx-datagrid-header-panel {
    height: 0;
    margin-top: -32px;
    min-height: 0;
    overflow: visible;
}

body.ff-app .ff-view-collections .ff-grid-result-row .dx-datagrid-header-panel .dx-toolbar,
body.ff-app .ff-view-collections .ff-grid-result-row .dx-datagrid-header-panel .dx-toolbar-items-container {
    height: 32px;
    min-height: 32px;
}

body.ff-app .ff-view-invoices .ff-finance-filter-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding-top: 2px;
}

body.ff-app .ff-view-invoices .ff-finance-filter-actions .checkbox,
body.ff-app .ff-view-invoices .ff-finance-filter-actions .valuesonly,
body.ff-app .ff-view-invoices .ff-finance-filter-actions .btn {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-view-invoices .ff-finance-filter-actions .checkbox label {
    display: inline-block;
    line-height: 20px;
    margin-bottom: 0;
    min-height: 0;
}

body.ff-app .ff-view-invoices .ff-finance-keep-filter {
    margin-left: auto !important;
}

body.ff-app .ff-view-invoices .ff-finance-close-filter {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 var(--ff-control-h) !important;
    justify-content: center !important;
    min-width: var(--ff-control-h) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: var(--ff-control-h) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-invoices #clientGridContainer .dx-command-edit .dx-button-content {
    align-items: center !important;
    display: inline-flex !important;
    overflow: visible !important;
    padding-top: 1px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-invoices #clientGridContainer .dx-command-edit .fa-eye {
    display: inline-block !important;
    line-height: 1 !important;
    transform: translateY(1px) !important;
}

/* Credit/Debit Note capture: compact header, line-items grid, and footer alignment. */
body.ff-app .ff-finance.ff-capture-page .ff-crdr-detail-row,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-row,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-id-date-row,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-invoice-row,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-value-row,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-footer-row {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 3px 8px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-detail-row::before,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-detail-row::after,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-row::before,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-row::after,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-id-date-row::before,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-id-date-row::after,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-invoice-row::before,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-invoice-row::after,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-value-row::before,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-value-row::after,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-footer-row::before,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-footer-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-detail-row > [class*="col-"],
body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-row > [class*="col-"],
body.ff-app .ff-finance.ff-capture-page .ff-crdr-id-date-row > [class*="col-"],
body.ff-app .ff-finance.ff-capture-page .ff-crdr-invoice-row > [class*="col-"],
body.ff-app .ff-finance.ff-capture-page .ff-crdr-value-row > [class*="col-"],
body.ff-app .ff-finance.ff-capture-page .ff-crdr-footer-row > [class*="col-"] {
    float: none !important;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-row {
    gap: 3px 8px;
    margin-bottom: 2px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-row > [class*="col-"] {
    margin-top: 0 !important;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-field {
    flex: 0 1 150px;
    max-width: 165px;
    min-width: 112px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-period {
    flex-basis: 104px;
    max-width: 112px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-export-date-field {
    flex: 0 1 145px;
    max-width: 155px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-status-field,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-check {
    align-items: center;
    display: flex;
    padding-top: 18px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-status-field {
    flex: 0 0 116px;
    justify-content: center;
    margin-right: 4px;
    max-width: 126px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-status-field .label {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: var(--ff-control-h);
    text-align: center;
    white-space: nowrap;
    width: 100%;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-check {
    flex: 0 0 78px;
    max-width: 86px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-onhold-check {
    flex-basis: 88px;
    margin-left: 4px;
    max-width: 94px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-check .checkbox {
    align-items: center;
    display: flex;
    margin: 0 !important;
    min-height: var(--ff-control-h);
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-check .checkbox label,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-option-field .checkbox label {
    align-items: center;
    display: inline-flex !important;
    line-height: calc(var(--ff-control-h) - 2px);
    margin-bottom: 0;
    min-height: var(--ff-control-h);
    padding-left: 26px !important;
    white-space: nowrap;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-check .checkbox.clip-check label::before,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-check .checkbox.clip-check label:before,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-option-field .checkbox.clip-check label::before,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-option-field .checkbox.clip-check label:before {
    top: 50% !important;
    transform: translateY(-50%);
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-check .checkbox.clip-check input[type="checkbox"]:checked + label::after,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-check .checkbox.clip-check input[type="checkbox"]:checked + label:after,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-option-field .checkbox.clip-check input[type="checkbox"]:checked + label::after,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-option-field .checkbox.clip-check input[type="checkbox"]:checked + label:after {
    align-items: center;
    display: inline-flex;
    height: 20px;
    justify-content: center;
    left: 0 !important;
    line-height: 20px !important;
    text-align: center;
    top: 50% !important;
    transform: translateY(-50%);
    width: 20px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-identification-group {
    flex: 0 1 404px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-id-date-row {
    flex-wrap: nowrap;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-trans-no {
    flex: 0 0 118px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-date {
    flex: 0 0 154px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-acc-no {
    flex: 0 0 116px;
}

body.ff-app .ff-finance.ff-capture-page #transId {
    text-align: left !important;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-client {
    flex: 1 1 360px;
    min-width: 290px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-invoice-group {
    flex: 1 1 500px;
    min-width: 420px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-invoice-no {
    flex: 0 1 150px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-invoice-date {
    flex: 0 0 150px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-invoice-amount {
    flex: 0 0 170px;
    max-width: 170px;
    min-width: 145px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-reason-field {
    flex: 1 1 300px;
    min-width: 240px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-currency-field {
    flex: 0 1 150px;
    min-width: 130px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-option-field {
    align-items: center;
    display: flex;
    flex: 0 1 280px;
    flex-wrap: nowrap;
    gap: 2px 6px;
    min-width: 270px;
    padding-top: 18px !important;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-option-field .checkbox,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-option-field .valuesonly {
    align-items: center;
    display: inline-flex;
    float: none !important;
    margin: 0 !important;
    white-space: nowrap;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-option-field .valuesonly .checkbox {
    margin: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-finance.ff-capture-page .ff-crdr-status-field,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-finance.ff-capture-page .ff-crdr-meta-check,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-finance.ff-capture-page .ff-crdr-option-field {
    padding-top: 13px !important;
}

body.ff-app .ff-finance.ff-capture-page .bootstrap-touchspin {
    align-items: stretch;
    display: flex;
    width: 100%;
}

body.ff-app .ff-finance.ff-capture-page .bootstrap-touchspin .form-control {
    min-width: 0;
    text-align: right;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-finance.ff-capture-page .bootstrap-touchspin-prefix {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    font-size: 10px !important;
    height: var(--ff-control-h) !important;
    justify-content: center;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding: 0 5px !important;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-line-items {
    margin: 4px 0 5px !important;
    padding: 5px 8px 6px !important;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-line-items > legend {
    margin-bottom: 1px !important;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-line-items-inner {
    margin: 0;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-line-toolbar-row,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-line-grid-row {
    margin: 0 !important;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-line-toolbar {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    min-height: 28px;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-line-toolbar-row > .col-md-12,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-line-grid-row > .col-md-12 {
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-line-toolbar .btn {
    margin: 0 !important;
    min-height: 26px;
    padding: 3px 10px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-line-items .table-wrapper,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-line-items .ff-parcel-grid-reponsive {
    margin: 0;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table {
    --ff-crdr-line-control-height: 28px;
    border-collapse: separate;
    margin: 0 !important;
    table-layout: fixed;
    width: 100%;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table col.ff-crdr-waybill-col {
    width: 19%;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table col.ff-crdr-amount-col {
    width: 14.5%;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table col.ff-crdr-comment-col {
    width: 15.5%;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table col.ff-crdr-reason-col {
    width: 12%;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table col.ff-crdr-actions-col {
    width: 10%;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table > tbody > tr > td,
body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table > tfoot > tr > th {
    vertical-align: middle !important;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table > tbody > tr > td {
    padding-bottom: 4px !important;
    padding-top: 4px !important;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table .ff-crdr-amount-cell,
body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table .ff-crdr-amount-total {
    padding-left: 6px !important;
    padding-right: 6px !important;
    text-align: right !important;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table .ff-crdr-saved-row .ff-crdr-amount-cell input.custom-form-control {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: right !important;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table input.form-control,
body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table input.custom-form-control,
body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table .ui-select-bootstrap .ui-select-search {
    box-sizing: border-box !important;
    font-size: 13px !important;
    height: var(--ff-crdr-line-control-height) !important;
    line-height: calc(var(--ff-crdr-line-control-height) - 8px) !important;
    margin: 0 !important;
    min-height: var(--ff-crdr-line-control-height) !important;
    width: 100%;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table input.form-control,
body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table input.custom-form-control {
    padding-bottom: 3px !important;
    padding-top: 3px !important;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table .ui-select-bootstrap .ui-select-search {
    align-items: center;
    display: flex;
    padding-bottom: 3px !important;
    padding-top: 3px !important;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table .ff-crdr-entry-row .ff-crdr-amount-cell input.form-control,
body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table .ff-crdr-saved-row .ff-crdr-amount-cell input.custom-form-control {
    font-variant-numeric: tabular-nums;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: right !important;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table > tfoot .ff-crdr-amount-total {
    font-variant-numeric: tabular-nums;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-footer-row {
    align-items: flex-end;
    margin-top: 2px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-footer-row > .ff-crdr-comment-col {
    flex: 1 1 520px;
    max-width: 760px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-comment {
    min-height: 58px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-footer-save-col {
    align-self: flex-end;
    flex: 0 0 auto;
    margin-left: auto;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-footer-save {
    float: none !important;
    margin: 0 0 1px !important;
    min-width: 140px;
}

@media (max-width: 960px) {
    body.ff-app .ff-finance.ff-capture-page .ff-crdr-identification-group,
    body.ff-app .ff-finance.ff-capture-page .ff-crdr-client,
    body.ff-app .ff-finance.ff-capture-page .ff-crdr-invoice-group,
    body.ff-app .ff-finance.ff-capture-page .ff-crdr-reason-field,
    body.ff-app .ff-finance.ff-capture-page .ff-crdr-option-field,
    body.ff-app .ff-finance.ff-capture-page .ff-crdr-footer-row > .ff-crdr-comment-col {
        flex-basis: 100%;
        max-width: none;
        min-width: 0;
    }

    body.ff-app .ff-finance.ff-capture-page .ff-crdr-id-date-row,
    body.ff-app .ff-finance.ff-capture-page .ff-crdr-invoice-row {
        flex-wrap: wrap;
    }
}

body.ff-app .ff-view-crdr .ff-finance-crdr-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    justify-content: flex-start;
    margin-bottom: 0 !important;
}

body.ff-app .ff-view-crdr .ff-finance-crdr-actions .clip-radio,
body.ff-app .ff-view-crdr .ff-finance-crdr-actions .checkbox,
body.ff-app .ff-view-crdr .ff-finance-crdr-actions .valuesonly,
body.ff-app .ff-view-crdr .ff-finance-crdr-actions .btn {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-view-crdr .ff-finance-crdr-search-type {
    margin-right: 0 !important;
}

body.ff-app .ff-view-crdr .ff-finance-crdr-actions .ff-finance-keep-filter {
    margin-left: auto !important;
}

body.ff-app .ff-view-crdr .ff-finance-crdr-actions .ff-finance-close-filter {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-width: var(--ff-control-h, 30px);
    padding-left: 0;
    padding-right: 0;
    width: var(--ff-control-h, 30px);
}

body.ff-app .ff-view-crdr .ff-finance-crdr-actions .ff-finance-close-filter .fa {
    line-height: 1;
}

body.ff-app .ff-view-crdr .ff-finance-crdr-actions .clip-radio label,
body.ff-app .ff-view-crdr .ff-finance-crdr-actions .checkbox label {
    line-height: 22px;
    margin-bottom: 0;
    min-height: 0;
}

body.ff-app .ff-view-crdr .ff-grid-toolbar-row > .ff-grid-toolbar-inner {
    padding-right: 0;
}

body.ff-app .ff-view-crdr #gridContainer .dx-datagrid-header-panel,
body.ff-app .ff-view-crdr .ff-grid-result-row .dx-datagrid-header-panel {
    height: 32px;
    margin-top: 0;
    min-height: 32px;
    overflow: visible;
    pointer-events: none;
}

body.ff-app .ff-view-crdr #gridContainer .dx-datagrid-header-panel .dx-toolbar,
body.ff-app .ff-view-crdr #gridContainer .dx-datagrid-header-panel .dx-toolbar-items-container,
body.ff-app .ff-view-crdr .ff-grid-result-row .dx-datagrid-header-panel .dx-toolbar,
body.ff-app .ff-view-crdr .ff-grid-result-row .dx-datagrid-header-panel .dx-toolbar-items-container {
    height: 30px;
    min-height: 30px;
}

body.ff-app .ff-view-crdr #gridContainer .dx-datagrid-header-panel .dx-toolbar-after,
body.ff-app .ff-view-crdr .ff-grid-result-row .dx-datagrid-header-panel .dx-toolbar-after {
    pointer-events: auto;
}

body.ff-app .ff-page.ff-view-crdr.ff-query-grid-page .accordion-no-display,
body.ff-app .ff-page.ff-view-crdr.ff-query-grid-page .accordion-no-display .panel,
body.ff-app .ff-page.ff-view-crdr.ff-query-grid-page .accordion-no-display .panel-body,
body.ff-app .ff-page.ff-view-crdr.ff-query-grid-page .ff-grid-toolbar-row,
body.ff-app .ff-page.ff-view-crdr.ff-query-grid-page .ff-grid-result-row {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-page.ff-view-crdr.ff-query-grid-page #gridContainer .dx-datagrid-header-panel,
body.ff-app .ff-page.ff-view-crdr.ff-query-grid-page .ff-grid-result-row .dx-datagrid-header-panel {
    height: 24px !important;
    margin-bottom: 0 !important;
    margin-top: -24px !important;
    min-height: 24px !important;
}

body.ff-app .ff-page.ff-view-crdr.ff-query-grid-page #gridContainer .dx-datagrid-header-panel .dx-toolbar,
body.ff-app .ff-page.ff-view-crdr.ff-query-grid-page #gridContainer .dx-datagrid-header-panel .dx-toolbar-items-container,
body.ff-app .ff-page.ff-view-crdr.ff-query-grid-page .ff-grid-result-row .dx-datagrid-header-panel .dx-toolbar,
body.ff-app .ff-page.ff-view-crdr.ff-query-grid-page .ff-grid-result-row .dx-datagrid-header-panel .dx-toolbar-items-container {
    height: 24px !important;
    min-height: 24px !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-view-crdr .ff-finance-primary-filters {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-view-crdr .ff-finance-primary-filters::before,
body.ff-app .ff-view-crdr .ff-finance-primary-filters::after,
body.ff-app .ff-view-crdr .ff-finance-date-block > .row::before,
body.ff-app .ff-view-crdr .ff-finance-date-block > .row::after {
    content: none;
    display: none;
}

body.ff-app .ff-view-crdr .ff-finance-primary-filters > [class*="col-"],
body.ff-app .ff-view-crdr .ff-finance-date-block > .row > [class*="col-"] {
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-view-crdr .ff-finance-primary-filters > .col-md-2:not(.ff-finance-branch-filter) {
    flex: 0 1 132px;
}

body.ff-app .ff-view-crdr .ff-finance-date-block {
    flex: 0 1 420px;
    max-width: 100%;
}

body.ff-app .ff-view-crdr .ff-finance-date-block > .row {
    align-items: flex-start;
    display: flex;
    flex-wrap: nowrap;
    gap: 4px 8px;
    margin: 0;
}

body.ff-app .ff-view-crdr .ff-finance-secondary-filters {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-view-crdr .ff-finance-secondary-filters > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-view-crdr .ff-finance-date-period {
    flex: 0 0 170px;
    max-width: 170px;
}

body.ff-app .ff-view-crdr .ff-finance-date-period .input-group {
    display: flex;
    width: 100%;
}

body.ff-app .ff-view-crdr .ff-finance-date-period .input-group-addon {
    align-items: center;
    display: inline-flex;
    flex: 0 0 66px;
    justify-content: center;
    min-width: 66px;
    padding-left: 4px !important;
    padding-right: 4px !important;
    width: 66px;
}

body.ff-app .ff-view-crdr .ff-finance-date-period select.form-control {
    flex: 1 1 auto;
    min-width: 0;
}

body.ff-app .ff-view-crdr .ff-finance-date-range {
    flex: 1 1 240px;
    min-width: 230px;
}

body.ff-app .ff-view-crdr .ff-finance-branch-filter {
    flex: 0 1 160px;
    max-width: 170px;
    min-width: 135px;
}

body.ff-app .ff-view-crdr .ff-finance-client-filter {
    flex: 1 1 320px;
    min-width: 260px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-block {
    flex-basis: 392px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-period {
    flex-basis: 154px;
    max-width: 154px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-period .input-group-addon {
    flex-basis: 60px;
    min-width: 60px;
    width: 60px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-range {
    min-width: 224px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-branch-filter {
    flex-basis: 145px;
    max-width: 155px;
    min-width: 128px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-crdr-actions .clip-radio label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-crdr-actions .checkbox label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-grid-toolbar-row .checkbox label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-grid-toolbar-row .checkbox-inline label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-period .input-group-addon,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-period .input-group-addon label {
    font-size: var(--ff-control-font-size, 11px) !important;
    line-height: 16px !important;
    min-height: 16px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-crdr-actions .valuesonly,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-grid-toolbar-row .valuesonly,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-grid-toolbar-row .checkbox-inline {
    font-size: var(--ff-control-font-size, 11px) !important;
}

@media (max-width: 700px) {
    body.ff-app .ff-view-crdr .ff-finance-date-block,
    body.ff-app .ff-view-crdr .ff-finance-date-period,
    body.ff-app .ff-view-crdr .ff-finance-date-range,
    body.ff-app .ff-view-crdr .ff-finance-branch-filter,
    body.ff-app .ff-view-crdr .ff-finance-client-filter {
        flex-basis: 100%;
        max-width: none;
        min-width: 0;
    }

    body.ff-app .ff-view-crdr .ff-finance-date-block > .row {
        flex-wrap: wrap;
    }
}

body.ff-app .ff-view-invoices .ff-finance-primary-filters {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-view-invoices .ff-finance-primary-filters::before,
body.ff-app .ff-view-invoices .ff-finance-primary-filters::after,
body.ff-app .ff-view-invoices .ff-finance-date-block > .row::before,
body.ff-app .ff-view-invoices .ff-finance-date-block > .row::after {
    content: none;
    display: none;
}

body.ff-app .ff-view-invoices .ff-finance-primary-filters > [class*="col-"] {
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-view-invoices .ff-finance-invoice-number {
    flex: 0 1 150px;
}

body.ff-app .ff-view-invoices .ff-finance-date-block {
    flex: 0 1 480px;
    max-width: 100%;
}

body.ff-app .ff-view-invoices .ff-finance-date-block > .row {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 4px;
    margin: 0;
}

body.ff-app .ff-view-invoices .ff-finance-date-block > .row > [class*="col-"] {
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-view-invoices .ff-finance-date-period {
    flex: 0 1 200px;
}

body.ff-app .ff-view-invoices .ff-finance-date-range {
    flex: 0 1 248px;
}

body.ff-app .ff-view-invoices .ff-finance-date-range .range-picker {
    max-width: 100%;
}

body.ff-app .ff-view-invoices .ff-finance-date-range .range-picker .start-date,
body.ff-app .ff-view-invoices .ff-finance-date-range .range-picker .end-date {
    flex: 1 1 104px;
    max-width: none;
}

body.ff-app .ff-view-invoices .ff-finance-branch-filter {
    flex: 0 1 180px;
}

body.ff-app .ff-view-invoices .ff-finance-client-filter {
    flex: 1 1 220px;
    min-width: 130px;
}

body.ff-app .ff-view-invoices .ff-finance-primary-filters,
body.ff-app .ff-view-invoices .ff-finance-secondary-filters,
body.ff-app .ff-view-invoices .ff-finance-user-row {
    gap: 2px 8px;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

body.ff-app .ff-view-invoices .ff-finance-primary-filters .form-group,
body.ff-app .ff-view-invoices .ff-finance-secondary-filters .form-group {
    margin-bottom: 0 !important;
}

body.ff-app .ff-view-invoices .ff-finance-filter-actions-row {
    margin-top: 0 !important;
}

@media (max-width: 640px) {
    body.ff-app .ff-view-invoices .ff-finance-invoice-number,
    body.ff-app .ff-view-invoices .ff-finance-date-block,
    body.ff-app .ff-view-invoices .ff-finance-date-period,
    body.ff-app .ff-view-invoices .ff-finance-date-range,
    body.ff-app .ff-view-invoices .ff-finance-branch-filter,
    body.ff-app .ff-view-invoices .ff-finance-client-filter {
        flex-basis: 100%;
        min-width: 0;
    }
}

body.ff-app .ff-view-manifests .ff-sr-card > .row {
    margin-bottom: 4px;
}

body.ff-app .ff-view-manifests .ff-sr-card > .row:last-child {
    margin-bottom: 0;
}

body.ff-app .ff-view-manifests .ff-sr-card .form-group {
    margin-bottom: 4px;
}

body.ff-app .ff-view-manifests .ff-sr-card label {
    display: block;
    line-height: 18px;
    margin-bottom: 1px;
    min-height: 20px;
    white-space: nowrap;
}

body.ff-app .ff-view-manifests .ff-sr-card .form-control,
body.ff-app .ff-view-manifests .ff-sr-card .ff-control,
body.ff-app .ff-view-manifests .ff-sr-card .ui-select-container {
    min-height: var(--ff-control-h);
}

body.ff-app .ff-view-manifests .ff-sr-card textarea.form-control {
    height: var(--ff-control-h) !important;
    max-height: none !important;
    min-height: var(--ff-control-h) !important;
    overflow-y: auto;
    resize: vertical;
    white-space: pre-wrap;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding-top: 20px;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-actions .checkbox,
body.ff-app .ff-view-manifests .ff-manifest-filter-actions .valuesonly,
body.ff-app .ff-view-manifests .ff-manifest-filter-actions .btn {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-actions .checkbox label {
    display: inline-block;
    line-height: 20px;
    margin-bottom: 0;
    min-height: 0;
}

body.ff-app .ff-view-manifests .ff-manifest-keep-filter {
    margin-left: auto !important;
}

body.ff-app .ff-view-manifests .ff-grid-toolbar-row .ff-grid-option-show-values {
    display: inline-flex;
    align-items: center;
    margin-left: 28px !important;
}

body.ff-app .ff-view-manifests .ff-grid-toolbar-row .ff-grid-option-copy-on-click {
    display: inline-flex;
    align-items: center;
    padding-top: 0 !important;
}

body.ff-app .ff-view-manifests .ff-sr-card .row:last-child > .col-md-12 {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    justify-content: flex-end;
    margin-bottom: 0 !important;
}

body.ff-app .ff-view-manifests .ff-sr-card .row:last-child .checkbox,
body.ff-app .ff-view-manifests .ff-sr-card .row:last-child .btn {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-row::before,
body.ff-app .ff-view-manifests .ff-manifest-filter-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-row > [class*="col-"] {
    flex: 0 1 170px !important;
    float: none !important;
    max-width: 205px !important;
    min-width: 135px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-row > .ff-manifest-date-filters {
    flex: 0 0 424px !important;
    max-width: 430px !important;
    min-width: 405px !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-row > .ff-manifest-type-filter {
    flex: 0 1 150px !important;
    max-width: 170px !important;
    min-width: 132px !important;
}

body.ff-app .ff-view-manifests .ff-manifest-date-row {
    grid-template-columns: minmax(136px, 150px) minmax(252px, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 4px !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-actions {
    align-self: flex-end !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    padding-top: 0 !important;
}

body.ff-app .ff-view-manifests .ff-manifest-keep-filter {
    margin-left: auto !important;
}

body.ff-app .ff-view-manifests .ff-manifest-search {
    margin-left: 0 !important;
}

/* View Manifests: flow filter fields across row breaks and keep fixed grid rows in lockstep. */
body.ff-app .ff-view-manifests {
    --ff-grid-row-height: 26px;
    --ff-grid-cell-padding-y: 1px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifests {
    --ff-grid-cell-padding-y: 0;
}

body.ff-app[data-grid-font-size="small"] .ff-view-manifests {
    --ff-grid-row-height: 18px;
    --ff-grid-cell-padding-y: 0;
}

body.ff-app[data-grid-font-size="large"] .ff-view-manifests {
    --ff-grid-row-height: 34px;
    --ff-grid-cell-padding-y: 2px;
}

body.ff-app .ff-view-manifests .ff-sr-card {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
}

body.ff-app .ff-view-manifests .ff-sr-card > .ff-sr-legend {
    flex: 0 0 100% !important;
}

body.ff-app .ff-view-manifests .ff-sr-card > .row {
    display: contents !important;
}

body.ff-app .ff-view-manifests .ff-sr-card > .row > [class*="col-"] {
    flex: 0 1 170px !important;
    float: none !important;
    max-width: 205px !important;
    min-width: 135px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-manifest-date-filters {
    flex: 0 1 424px !important;
    max-width: 430px !important;
    min-width: 405px !important;
}

body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-manifest-type-filter {
    align-self: flex-start !important;
    flex: 0 1 150px !important;
    max-width: 170px !important;
    min-width: 132px !important;
}

body.ff-app .ff-view-manifests .ff-manifest-type-filter select.form-control {
    height: var(--ff-control-h) !important;
    margin-top: 0 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-manifests .ff-manifest-date-row {
    align-items: flex-start !important;
    margin: 0 !important;
}

body.ff-app .ff-view-manifests .ff-manifest-date-row > [class*="col-"] {
    align-self: flex-start !important;
}

body.ff-app .ff-view-manifests .ff-manifest-date-row .form-group {
    margin-bottom: 0 !important;
}

body.ff-app .ff-view-manifests .ff-manifest-date-row :is(.input-group, .range-picker) {
    height: var(--ff-control-h) !important;
    margin-top: 0 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-manifests .ff-manifest-date-row :is(.start-date, .end-date, .input-icon, .form-control) {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-manifests .ff-manifest-date-row .input-group-addon {
    height: var(--ff-control-h) !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-actions {
    align-self: flex-end !important;
    flex: 1 1 520px !important;
    max-width: none !important;
    min-width: 360px !important;
}

body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-manifest-filter-actions {
    flex: 1 1 520px !important;
    max-width: none !important;
    min-width: 360px !important;
    width: auto !important;
}

body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-filter-date-period,
body.ff-app .ff-view-manifests .ff-manifest-filter-row > .ff-filter-date-period {
    flex: 0 0 154px !important;
    max-width: 154px !important;
    min-width: 154px !important;
}

body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-filter-date-range,
body.ff-app .ff-view-manifests .ff-manifest-filter-row > .ff-filter-date-range {
    flex: 0 1 315px !important;
    max-width: 330px !important;
    min-width: 292px !important;
}

body.ff-app .ff-view-manifests .ff-filter-date-period .ff-date-period-group {
    align-items: center !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    max-width: 154px !important;
    min-height: var(--ff-control-h) !important;
    overflow: hidden !important;
    width: 154px !important;
}

body.ff-app .ff-view-manifests .ff-filter-date-period .ff-date-period-ignore {
    align-items: center !important;
    align-self: stretch !important;
    display: flex !important;
    height: var(--ff-control-h) !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    padding: 0 !important;
    width: 58px !important;
}

body.ff-app .ff-view-manifests .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label {
    align-items: center !important;
    display: inline-flex !important;
    height: var(--ff-control-h) !important;
    line-height: var(--ff-control-h) !important;
    margin: 0 !important;
    min-height: var(--ff-control-h) !important;
    padding: 0 3px 0 22px !important;
}

body.ff-app .ff-view-manifests .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before {
    height: 14px !important;
    left: 5px !important;
    top: 5px !important;
    width: 14px !important;
}

body.ff-app .ff-view-manifests .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after {
    left: 8px !important;
    top: 4px !important;
}

body.ff-app .ff-view-manifests .ff-filter-date-period .ff-date-period-select {
    height: var(--ff-control-h) !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    min-height: var(--ff-control-h) !important;
    min-width: 0 !important;
    padding: 0 18px 0 6px !important;
}

body.ff-app .ff-view-manifests .ff-manifest-date-range .range-picker {
    max-width: 100% !important;
    width: 100% !important;
}

body.ff-app .ff-view-manifests .ff-manifest-date-range .range-picker .start-date,
body.ff-app .ff-view-manifests .ff-manifest-date-range .range-picker .end-date {
    flex: 1 1 0 !important;
    max-width: none !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-actions {
    align-items: center !important;
    display: flex !important;
    flex: 1 1 760px !important;
    flex-wrap: nowrap !important;
    gap: 8px 14px !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    min-width: 620px !important;
    padding-top: 18px !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-options,
body.ff-app .ff-view-manifests .ff-manifest-filter-submit {
    align-items: center !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    min-width: 0 !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-options {
    justify-content: flex-start !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-options-under-webuser {
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin-top: 0 !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-options-under-webuser .checkbox,
body.ff-app .ff-view-manifests .ff-manifest-filter-options-under-webuser .valuesonly {
    display: inline-flex !important;
    margin: 0 !important;
    min-height: 18px !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-submit {
    justify-content: flex-end !important;
    margin-left: auto !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-options .checkbox,
body.ff-app .ff-view-manifests .ff-manifest-filter-options .valuesonly,
body.ff-app .ff-view-manifests .ff-manifest-filter-submit .checkbox,
body.ff-app .ff-view-manifests .ff-manifest-filter-submit .valuesonly {
    flex: 0 0 auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

body.ff-app .ff-view-manifests .ff-manifest-keep-filter {
    margin-left: 0 !important;
}

body.ff-app .ff-view-manifests .ff-manifest-close-filter {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 var(--ff-control-h) !important;
    justify-content: center !important;
    min-width: var(--ff-control-h) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: var(--ff-control-h) !important;
}

body.ff-app .ff-view-manifests .ff-manifest-search {
    height: var(--ff-control-h) !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    margin-left: 0 !important;
    min-height: var(--ff-control-h) !important;
    min-width: 132px !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    width: 150px !important;
}

body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-manifest-filter-options-under-webuser {
    align-self: flex-end !important;
    flex: 1 1 470px !important;
    max-width: none !important;
    min-width: 430px !important;
    padding-top: 0 !important;
    width: auto !important;
}

body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-manifest-filter-actions {
    align-self: flex-end !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    min-width: 300px !important;
    padding-top: 0 !important;
    width: auto !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-submit {
    height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-options-under-webuser label,
body.ff-app .ff-view-manifests .ff-manifest-filter-submit label {
    white-space: nowrap !important;
}

body.ff-app .ff-view-manifests #gridContainer .dx-datagrid-rowsview .dx-row,
body.ff-app .ff-view-manifests #gridContainer .dx-datagrid-rowsview .dx-data-row,
body.ff-app .ff-view-manifests #gridContainer .dx-datagrid-rowsview .dx-row > td {
    height: var(--ff-grid-row-height) !important;
    max-height: var(--ff-grid-row-height) !important;
    min-height: var(--ff-grid-row-height) !important;
}

body.ff-app .ff-view-manifests #gridContainer .dx-datagrid-rowsview .dx-row > td {
    box-sizing: border-box !important;
    line-height: calc(var(--ff-grid-row-height) - 4px) !important;
    overflow: hidden !important;
    padding-bottom: var(--ff-grid-cell-padding-y) !important;
    padding-top: var(--ff-grid-cell-padding-y) !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

body.ff-app .ff-view-manifests #gridContainer .dx-datagrid-rowsview .dx-row > td :is(span, div) {
    max-height: calc(var(--ff-grid-row-height) - 2px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app .ff-view-manifests #gridContainer .dx-datagrid-rowsview :is(.dx-button, .dx-button-content, .dx-dropdownbutton, .dx-dropdownbutton-action) {
    height: calc(var(--ff-grid-row-height) - 4px) !important;
    line-height: calc(var(--ff-grid-row-height) - 6px) !important;
    max-height: calc(var(--ff-grid-row-height) - 4px) !important;
    min-height: calc(var(--ff-grid-row-height) - 4px) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

@media (max-width: 1180px) {
    body.ff-app .ff-view-manifests .ff-manifest-filter-actions,
    body.ff-app .ff-view-manifests .ff-manifest-filter-options {
        flex-wrap: wrap !important;
    }

    body.ff-app .ff-view-manifests .ff-manifest-filter-options-under-webuser {
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 760px) {
    body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-manifest-date-filters {
        flex: 1 1 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-filter-date-period,
    body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-filter-date-range {
        flex: 1 1 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body.ff-app .ff-view-manifests .ff-manifest-filter-actions {
        flex: 1 1 100% !important;
        flex-wrap: wrap !important;
        min-width: 0 !important;
        padding-top: 0 !important;
    }

    body.ff-app .ff-view-manifests .ff-manifest-filter-options {
        flex-wrap: wrap !important;
    }

    body.ff-app .ff-view-manifests .ff-manifest-filter-submit {
        margin-left: 0 !important;
    }
}

/* Manifest Routes filter: keep the older Bootstrap markup compact without touching View Waybills. */
body.ff-app .ff-route-filter-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px 8px !important;
    margin-bottom: 4px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-route-filter-row::before,
body.ff-app .ff-route-filter-row::after,
body.ff-app .ff-route-date-row::before,
body.ff-app .ff-route-date-row::after,
body.ff-app .ff-route-actions-row::before,
body.ff-app .ff-route-actions-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-route-filter-row > [class*="col-"],
body.ff-app .ff-route-date-row > [class*="col-"],
body.ff-app .ff-route-actions-row > [class*="col-"] {
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-route-filter-row .form-group {
    margin-bottom: 2px !important;
}

body.ff-app .ff-route-filter-row label {
    display: block;
    line-height: 16px;
    margin-bottom: 1px;
    min-height: 16px;
    white-space: nowrap;
}

body.ff-app .ff-route-filter-row .form-control,
body.ff-app .ff-route-filter-row .ff-control,
body.ff-app .ff-route-filter-row .ui-select-container {
    min-height: var(--ff-control-h);
}

body.ff-app .ff-route-manifest-no {
    flex: 0 1 150px !important;
    max-width: 170px !important;
    min-width: 130px !important;
}

body.ff-app .ff-route-waybill-list {
    flex: 0 1 180px !important;
    max-width: 205px !important;
    min-width: 150px !important;
}

body.ff-app .ff-route-date-type {
    flex: 0 1 175px !important;
    max-width: 195px !important;
    min-width: 150px !important;
}

body.ff-app .ff-route-date-filters {
    flex: 0 1 430px !important;
    max-width: 455px !important;
    min-width: 375px !important;
}

body.ff-app .ff-route-date-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px 8px !important;
    margin: 0 !important;
}

body.ff-app .ff-route-date-period {
    flex: 0 1 150px !important;
    max-width: 160px !important;
    min-width: 140px !important;
}

body.ff-app .ff-route-date-range {
    flex: 1 1 260px !important;
    max-width: 290px !important;
    min-width: 245px !important;
}

body.ff-app .ff-route-date-range .range-picker {
    max-width: 100% !important;
}

body.ff-app .ff-route-date-range .range-picker .start-date,
body.ff-app .ff-route-date-range .range-picker .end-date {
    flex: 1 1 104px;
    max-width: none;
}

body.ff-app .ff-route-client {
    flex: 1 1 300px !important;
    max-width: 380px !important;
    min-width: 250px !important;
}

body.ff-app .ff-route-driver,
body.ff-app .ff-route-vehicle {
    flex: 0 1 245px !important;
    max-width: 285px !important;
    min-width: 205px !important;
}

body.ff-app .ff-route-manifest-type {
    flex: 0 1 180px !important;
    max-width: 210px !important;
    min-width: 150px !important;
}

body.ff-app .ff-route-route {
    flex: 1 1 250px !important;
    max-width: 330px !important;
    min-width: 210px !important;
}

body.ff-app .ff-route-google-map {
    flex: 0 0 168px !important;
    max-width: 178px !important;
    min-width: 168px !important;
}

body.ff-app .ff-route-google-map .form-group {
    margin-top: 18px !important;
}

body.ff-app .ff-route-google-map .checkbox {
    margin: 0 !important;
    white-space: nowrap !important;
}

body.ff-app .ff-route-google-map .checkbox label {
    display: inline-block !important;
    line-height: 20px !important;
    min-height: 20px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-route-date-type .ui-select-bootstrap:not(.open) .ui-select-search {
    border: 0 !important;
    flex: 0 0 0 !important;
    min-width: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
    width: 0 !important;
}

body.ff-app .ff-route-date-type .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-route-date-type .ui-select-bootstrap > .ui-select-match > .ui-select-toggle {
    align-items: center !important;
    display: flex !important;
    justify-content: flex-start !important;
    padding-left: 8px !important;
    padding-right: 28px !important;
}

body.ff-app .ff-route-date-type .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-route-date-type .ui-select-bootstrap .ui-select-match-text span {
    display: block !important;
    flex: 1 1 auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app .ff-route-actions-row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
}

body.ff-app .ff-route-filter-actions {
    align-items: center !important;
    display: flex !important;
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    justify-content: flex-end !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-route-filter-actions .btn,
body.ff-app .ff-route-filter-actions .checkbox {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-route-keep-filter {
    order: 1 !important;
}

body.ff-app .ff-route-close-filter {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 var(--ff-control-h) !important;
    justify-content: center !important;
    min-width: var(--ff-control-h) !important;
    order: 2 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: var(--ff-control-h) !important;
}

body.ff-app .ff-route-search {
    order: 3 !important;
}

body.ff-app[data-grid-density="compact"] .ff-route-filter-row,
body.ff-app.ff-grid-density-compact .ff-route-filter-row {
    gap: 2px 7px !important;
}

@media (max-width: 760px) {
    body.ff-app .ff-route-date-filters {
        flex: 1 1 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body.ff-app .ff-route-date-range {
        flex: 1 1 250px !important;
    }
}

/* Manifest Routes: page-scoped final layout and ui-select fixes. */
body.ff-app .ff-view-manifest-routes .ff-route-filter-card {
    align-items: flex-start !important;
    column-gap: 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 3px !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-filter-card > .ff-sr-legend {
    flex: 0 0 100% !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-filter-card > .ff-route-filter-row,
body.ff-app .ff-view-manifest-routes .ff-route-filter-card > .ff-route-actions-row {
    display: contents !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-filter-row,
body.ff-app .ff-view-manifest-routes .ff-route-actions-row {
    margin-bottom: 0 !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-google-map .form-group {
    margin-top: 18px !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-filter-actions {
    align-self: flex-start !important;
    flex: 1 1 315px !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    max-width: none !important;
    min-width: 280px !important;
    padding-top: 18px !important;
    width: auto !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-date-type .ui-select-bootstrap:not(.open) > input.ui-select-search,
body.ff-app .ff-view-manifest-routes .ff-route-date-type .ui-select-bootstrap:not(.open) .ui-select-search {
    display: none !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-date-type .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-view-manifest-routes .ff-route-date-type .ui-select-bootstrap > .ui-select-match > .ui-select-toggle {
    overflow: hidden !important;
    padding-right: 48px !important;
    position: relative !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-date-type .ui-select-bootstrap .ui-select-placeholder,
body.ff-app .ff-view-manifest-routes .ff-route-date-type .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-view-manifest-routes .ff-route-date-type .ui-select-bootstrap .ui-select-match-text span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-date-type .ui-select-bootstrap .ui-select-toggle > a.btn {
    height: 18px !important;
    line-height: 18px !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    right: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    z-index: 2 !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-date-type .ui-select-bootstrap .ui-select-toggle > .caret {
    right: 10px !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-results {
    margin-bottom: 0 !important;
    padding-bottom: 6px !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-results .ff-grid-result-row,
body.ff-app .ff-view-manifest-routes .ff-route-results .ff-grid-result-row > .col-md-12,
body.ff-app .ff-view-manifest-routes .ff-route-results #gridContainer,
body.ff-app .ff-view-manifest-routes .ff-route-results #gridContainer .dx-datagrid,
body.ff-app .ff-view-manifest-routes .ff-route-results #gridContainer .dx-datagrid-pager,
body.ff-app .ff-view-manifest-routes .ff-route-results #gridContainer .dx-pager {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-results #gridContainer {
    min-height: 300px !important;
    overflow: hidden !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-results #gridContainer .dx-datagrid {
    height: 100% !important;
    max-height: 100% !important;
}

body.ff-app .ff-view-manifest-routes #gridContainer .dx-command-select,
body.ff-app .ff-view-manifest-routes #gridContainer .dx-command-select > td,
body.ff-app .ff-view-manifest-routes #gridContainer .dx-command-select > tr > td {
    max-width: 30px !important;
    min-width: 30px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    width: 30px !important;
}

body.ff-app .ff-view-manifest-routes #gridContainer .dx-command-select .dx-checkbox,
body.ff-app .ff-view-manifest-routes #gridContainer .dx-command-select .dx-checkbox-container {
    align-items: center !important;
    display: inline-flex !important;
    height: 18px !important;
    justify-content: center !important;
    margin: 0 auto !important;
    min-height: 18px !important;
    vertical-align: middle !important;
}

body.ff-app .ff-view-manifest-routes #gridContainer .dx-command-select .dx-checkbox-icon {
    margin: 0 !important;
}

body.ff-app .ff-view-manifest-routes #gridContainer .dx-command-edit,
body.ff-app .ff-view-manifest-routes #gridContainer .dx-command-edit > td,
body.ff-app .ff-view-manifest-routes #gridContainer .dx-command-edit > tr > td {
    max-width: 38px !important;
    min-width: 38px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    width: 38px !important;
}

@media (max-width: 760px) {
    body.ff-app .ff-view-manifest-routes .ff-route-filter-actions {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        padding-top: 2px !important;
    }
}

@media (max-width: 760px) {
    body.ff-app .ff-view-manifests .ff-manifest-filter-row > .ff-manifest-date-filters {
        flex: 1 1 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body.ff-app .ff-view-manifests .ff-manifest-date-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

body.ff-app .ff-waybill .ff-manifest-filter-row > [class*="col-"] {
    min-width: 0;
}

body.ff-app .ff-waybill .ff-manifest-date-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(248px, 1.45fr);
    column-gap: 12px;
    row-gap: 10px;
    align-items: end;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill .ff-manifest-date-row::before,
body.ff-app .ff-waybill .ff-manifest-date-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill .ff-manifest-date-row > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill .ff-manifest-date-filters .range-picker {
    max-width: 100%;
}

body.ff-app .ff-waybill .ff-manifest-date-filters .range-picker .start-date,
body.ff-app .ff-waybill .ff-manifest-date-filters .range-picker .end-date {
    flex: 1 1 0;
    max-width: none;
}

@media (max-width: 1320px) and (min-width: 992px) {
    body.ff-app .ff-waybill .ff-manifest-date-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1500px) {
    body.ff-app .ff-waybill .ff-waybill-filter-grid {
        grid-template-columns:
            minmax(150px, 180px)
            minmax(165px, 190px)
            minmax(170px, 210px)
            minmax(248px, 260px)
            minmax(180px, 220px);
    }

    body.ff-app .ff-view-waybills .ff-waybill-filter-grid {
        grid-template-columns:
            minmax(140px, 165px)
            minmax(150px, 175px)
            minmax(165px, 190px)
            minmax(236px, 248px)
            minmax(150px, 180px);
    }
}

@media (max-width: 1200px) {
    body.ff-app .ff-waybill .ff-waybill-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 840px) {
    body.ff-app .ff-waybill .ff-waybill-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    body.ff-app .ff-waybill .ff-waybill-filter-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-field,
    body.ff-app .ff-waybill .ff-filter-inline-row > .ff-filter-field {
        flex: 1 1 100%;
    }
}

/* Base: ALL fieldset legends get the "chip" look (keep) */
body.ff-app fieldset > legend {
    position: static !important;
    display: inline-block;
    margin: 0 !important;
    padding: 6px 10px !important;
    border: 1px solid var(--divider) !important;
    border-radius: 999px;
    background: var(--surface-2) !important;
    color: var(--text-muted) !important;
    font-weight: 700 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Sub legends: just a touch smaller */
body.ff-app fieldset fieldset > legend {
    font-size: 12.5px !important; /* was 14px */
    padding: 5px 9px !important; /* slightly tighter */
    letter-spacing: .07em; /* optional */
}



/* Flat subsection inside a fieldset (no nested card look) */
body.ff-app .ff-subsection {
    /* Pull to the fieldset edges (match your fieldset padding: 14px) */
    margin-left: -14px;
    margin-right: -14px;
    /* Space it from the content above without looking like a separate card */
    margin-top: 10px;
    /* Give it its own internal padding */
    padding: 10px 14px 8px;
    /* Visually separate it, but don't create a "nested card" */
    border-top: 1px solid var(--divider);
    background: transparent; /* or var(--surface-2) if you want a faint band */
}

body.ff-app .ff-subsection__title {
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 8px;
}

body.ff-app .ff-subsection__table {
    margin-bottom: 0 !important;
}

    body.ff-app .ff-subsection__table td {
        padding: 0 !important;
        line-height: 1.2;
    }

body.ff-app .ff-subsection__divider-row td {
    padding: 8px 0 !important;
}

body.ff-app .ff-subsection__divider {
    height: 1px;
    background: var(--divider);
    width: 100%;
}

body.ff-app .ff-waybill .ff-ui.ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-waybill .ff-ui.ui-select-bootstrap .ui-select-match-text span {
    line-height: 1.35 !important;
}

body.ff-app .ff-waybill .ff-ui.ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn,
body.ff-app .ff-waybill .ff-ui.ui-select-bootstrap > .ui-select-match > .btn {
    min-height: 34px !important;
    line-height: 1.35 !important;
    align-items: center !important;
}

body.ff-app .ff-waybill .ff-charge-summary-table > tbody > tr > td:first-child,
body.ff-app .ff-waybill .ff-subsection__table > tbody > tr > td:first-child {
    width: 58%;
    padding-right: 0 !important;
    vertical-align: middle !important;
}

body.ff-app .ff-waybill .ff-charge-summary-table > tbody > tr > td:last-child,
body.ff-app .ff-waybill .ff-subsection__table > tbody > tr > td:last-child {
    width: 42%;
    vertical-align: middle !important;
}

body.ff-app .ff-waybill .ff-charge-summary-table > tbody > tr.ff-charge-divider-row > td {
    padding: 8px 0 !important;
}

body.ff-app .ff-waybill .ff-charge-summary-table > tbody > tr.ff-charge-total-row > td:first-child {
    padding: 0 !important;
}

body.ff-app .ff-waybill .ff-charge-summary-table > tbody > tr.ff-charge-total-row > td:last-child {
    padding: 0 10px 0 0 !important;
}

/* Waybill rating: keep charge/rating rows dense so more of the capture page is visible. */
body.ff-app .ff-waybill fieldset.ff-legend--main {
    padding: 10px 12px 8px !important;
    margin-bottom: 10px !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main fieldset {
    padding: 4px 10px 6px !important;
    margin-bottom: 6px !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main fieldset > legend {
    margin-bottom: 0 !important;
    padding: 4px 8px !important;
    transform: translateY(-50%);
}

body.ff-app .ff-waybill .ff-rating-compact-row,
body.ff-app .ff-waybill .ff-rating-split-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px 6px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0 !important;
}

body.ff-app .ff-waybill .ff-rating-compact-row::before,
body.ff-app .ff-waybill .ff-rating-compact-row::after,
body.ff-app .ff-waybill .ff-rating-split-row::before,
body.ff-app .ff-waybill .ff-rating-split-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill .ff-rating-compact-row > [class*="col-"],
body.ff-app .ff-waybill .ff-rating-split-row > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill .ff-rating-settings-col {
    flex: 0 1 165px;
}

body.ff-app .ff-waybill .ff-rating-charges-col {
    flex: 1.12 1 520px;
}

body.ff-app .ff-waybill .ff-rating-calc-col {
    flex: 1 1 420px;
}

body.ff-app .ff-waybill .ff-rating-charges-section {
    flex: 1 1 220px;
}

body.ff-app .ff-waybill .ff-rating-vars-section {
    flex: 1.18 1 270px;
}

body.ff-app .ff-waybill .ff-rating-fcalc-section {
    flex: 1 1 245px;
}

body.ff-app .ff-waybill .ff-rating-mass-section {
    flex: 0.72 1 155px;
}

body.ff-app .ff-waybill .ff-stages-rating-row .ff-rating-charges-section,
body.ff-app .ff-waybill .ff-stages-rating-row .ff-rating-vars-section,
body.ff-app .ff-waybill .ff-stages-rating-row .ff-rating-fcalc-section,
body.ff-app .ff-waybill .ff-stages-rating-row .ff-rating-mass-section {
    flex-basis: 220px;
}

body.ff-app .ff-waybill .ff-rating-vars-section table.table-condensed > tbody > tr > td.text-bold {
    white-space: nowrap;
}

body.ff-app .ff-waybill .ff-rating-vars-section table.table-condensed > tbody > tr > td:last-child {
    white-space: nowrap;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .checkbox.clip-check {
    display: block;
    margin-top: 0 !important;
    margin-bottom: 2px !important;
    min-height: 22px !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .checkbox.clip-check label {
    box-sizing: border-box;
    display: block !important;
    line-height: 20px !important;
    min-height: 22px !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    user-select: none;
    width: 100%;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .checkbox.clip-check input[type="checkbox"][disabled] + label {
    cursor: not-allowed;
}

body.ff-app .clip-check input[type="checkbox"][disabled] + label {
    color: var(--text-disabled) !important;
    cursor: not-allowed;
    opacity: .7;
}

body.ff-app .clip-check input[type="checkbox"][disabled] {
    cursor: not-allowed;
    filter: grayscale(100%);
}

body.ff-app .ff-waybill fieldset.ff-legend--main table.table-condensed {
    margin-bottom: 0 !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main table.table-condensed > tbody > tr > th,
body.ff-app .ff-waybill fieldset.ff-legend--main table.table-condensed > tbody > tr > td {
    padding: 1px 4px !important;
    line-height: 1.1 !important;
    vertical-align: middle !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr > td,
body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection__table > tbody > tr > td {
    height: 21px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main input.editable-rates.form-control {
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 5px !important;
    line-height: 18px !important;
    font-size: 13px !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-charge-summary-table .ff-icon-tooltip.margin-top-10 {
    margin-top: 0 !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr.ff-charge-divider-row > td,
body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection__divider-row > td {
    padding: 2px 0 !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-charge-summary-table .totalUL {
    border-bottom-width: 1px !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-charge-total-row > td {
    height: 18px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.1 !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 1px !important;
    padding: 3px 0 3px !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection__title {
    margin-bottom: 2px !important;
}

body.ff-app .ff-waybill .ff-rating-variable-check-cell {
    height: 20px !important;
    line-height: 20px !important;
    vertical-align: middle !important;
}

body.ff-app .ff-waybill .ff-rating-variable-check {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    min-height: 20px !important;
    padding: 0 !important;
    width: 20px;
}

body.ff-app .ff-waybill .ff-rating-variable-check label {
    display: inline-block !important;
    height: 20px !important;
    line-height: 20px !important;
    margin: 0 !important;
    min-height: 20px !important;
    padding: 0 !important;
    width: 20px !important;
}

body.ff-app .ff-waybill .ff-rating-variable-check label:before {
    left: 0 !important;
    margin-right: 0 !important;
    top: 0 !important;
}

body.ff-app .ff-waybill .ff-rating-variable-check label:after {
    left: 1px !important;
    top: -1px !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-rating-note {
    margin: 10px 0 6px;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-rating-note .label {
    display: inline-block;
    line-height: 1.2;
    white-space: normal;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-rating-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    padding-right: 10px;
}

body.ff-app[data-theme="dark"] .ff-waybill fieldset.ff-legend--main .ff-charge-summary-table .totalUL {
    border-bottom-color: var(--border) !important;
}

body.ff-app[data-theme="dark"] .ff-waybill fieldset.ff-legend--main .ff-subsection {
    border-top-color: var(--border) !important;
}

body.ff-app[data-theme="dark"] .ff-waybill fieldset.ff-legend--main .ff-subsection__divider {
    background: var(--border) !important;
}

body.ff-app :is(input, textarea, select, .form-control):focus,
body.ff-app :is(input, textarea, select, .form-control):focus-visible {
    background-color: var(--surface) !important;
    border-color: var(--primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--focus) !important;
}



/* =========================================================
   FF WIZARD - FINAL (single rail + fill, NO segments)
   Uses ONLY existing tokens from body.ff-app
   Requires: #wizard has class "ff-wizard" and ff-step-* ff-steps-* via ng-class
   ========================================================= */

    /* --- HARD KILL: all connector segments from any prior CSS/plugin --- */
    body.ff-app #wizard.ff-wizard.swMain > ul > li > a::before,
    body.ff-app #wizard.ff-wizard.swMain > ul > li > a::after,
    body.ff-app #wizard.ff-wizard.swMain > ul > li::before,
    body.ff-app #wizard.ff-wizard.swMain > ul > li::after {
        content: none !important;
    }

    /* Step row */
    body.ff-app #wizard.ff-wizard.swMain > ul {
        position: relative !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 14px !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 16px 16px 12px !important;
        background: var(--surface) !important;
        border-bottom: 1px solid var(--divider) !important;
        overflow-x: auto !important;
        overscroll-behavior-x: contain !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
    }

        body.ff-app #wizard.ff-wizard.swMain > ul,
        body.ff-app #wizard.ff-wizard.swMain > ul * {
            box-sizing: border-box !important;
        }

            /* Step items */
            body.ff-app #wizard.ff-wizard.swMain > ul > li {
                flex: 1 1 0 !important;
                min-width: 150px !important;
                text-align: center !important;
                margin: 0 !important;
                padding: 0 !important;
                position: relative !important;
            }

                /* Click target */
                body.ff-app #wizard.ff-wizard.swMain > ul > li > a {
                    width: 100% !important;
                    position: relative !important;
                    display: inline-flex !important;
                    flex-direction: column !important;
                    align-items: center !important;
                    gap: 6px !important;
                    padding: 4px 10px 8px !important;
                    margin: 0 !important;
                    text-decoration: none !important;
                    background: transparent !important;
                    border: 0 !important;
                    border-radius: var(--radius-sm) !important;
                    color: var(--text) !important;
                    cursor: pointer !important;
                    user-select: none !important;
                }

                    body.ff-app #wizard.ff-wizard.swMain > ul > li > a:focus,
                    body.ff-app #wizard.ff-wizard.swMain > ul > li > a:focus-visible {
                        outline: none !important;
                    }

                    body.ff-app #wizard.ff-wizard.swMain > ul > li > a:focus-visible {
                        box-shadow: 0 0 0 5px var(--focus) !important;
                    }

            /* =========================
   SINGLE RAIL + SINGLE FILL
   ========================= */

            /* Base rail (sits behind everything) */
            body.ff-app #wizard.ff-wizard.swMain > ul::before {
                content: "" !important;
                position: absolute !important;
                /* circle 36px, ul padding-top 16px => centerline = 16 + 18 = 34 */
                top: 34px !important;
                /* rail starts/ends under first/last circle centers */
                left: 34px !important; /* 16 padding + 18 radius */
                right: 34px !important;
                height: 4px !important;
                background: var(--divider) !important;
                border-radius: 999px !important;
                z-index: 0 !important;
            }

            /* Filled rail */
            body.ff-app #wizard.ff-wizard.swMain > ul::after {
                content: "" !important;
                position: absolute !important;
                top: 34px !important;
                left: 34px !important;
                height: 4px !important;
                /* full inner width then scaled down by step */
                width: calc(100% - 68px) !important;
                background: var(--primary) !important;
                border-radius: 999px !important;
                transform-origin: left center !important;
                transform: scaleX(0) !important;
                z-index: 1 !important;
            }

/* edit mode fills with success (optional) */
body.ff-app #wizard.ff-wizard.ff-edit.swMain > ul::after {
    background: var(--success) !important;
}

/* 4 steps */
body.ff-app #wizard.ff-wizard.ff-steps-4.ff-step-1.swMain > ul::after {
    transform: scaleX(0) !important;
}

body.ff-app #wizard.ff-wizard.ff-steps-4.ff-step-2.swMain > ul::after {
    transform: scaleX(0.333333) !important;
}

body.ff-app #wizard.ff-wizard.ff-steps-4.ff-step-3.swMain > ul::after {
    transform: scaleX(0.666666) !important;
}

body.ff-app #wizard.ff-wizard.ff-steps-4.ff-step-4.swMain > ul::after {
    transform: scaleX(1) !important;
}

/* 6 steps */
body.ff-app #wizard.ff-wizard.ff-steps-6.ff-step-1.swMain > ul::after {
    transform: scaleX(0) !important;
}

body.ff-app #wizard.ff-wizard.ff-steps-6.ff-step-2.swMain > ul::after {
    transform: scaleX(0.2) !important;
}

body.ff-app #wizard.ff-wizard.ff-steps-6.ff-step-3.swMain > ul::after {
    transform: scaleX(0.4) !important;
}

body.ff-app #wizard.ff-wizard.ff-steps-6.ff-step-4.swMain > ul::after {
    transform: scaleX(0.6) !important;
}

body.ff-app #wizard.ff-wizard.ff-steps-6.ff-step-5.swMain > ul::after {
    transform: scaleX(0.8) !important;
}

body.ff-app #wizard.ff-wizard.ff-steps-6.ff-step-6.swMain > ul::after {
    transform: scaleX(1) !important;
}

/* =========================
   CIRCLES + LABELS
   ========================= */

body.ff-app #wizard.ff-wizard .stepNumber {
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    background: var(--surface) !important;
    border: 2px solid var(--border) !important;
    color: var(--text-muted) !important;
    position: relative !important;
    z-index: 2 !important; /* above rails */
}

/* active halo */
body.ff-app #wizard.ff-wizard.swMain > ul > li > a.selected:not(.done) .stepNumber::before {
    content: "" !important;
    position: absolute !important;
    inset: -7px !important;
    border-radius: 999px !important;
    background: var(--nav-active-bg) !important;
    border: 1px solid var(--nav-active-border) !important;
    z-index: -1 !important;
}

/* current */
body.ff-app #wizard.ff-wizard.swMain > ul > li > a.selected:not(.done) .stepNumber {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
    box-shadow: var(--shadow-1) !important;
}

/* done */
body.ff-app #wizard.ff-wizard.swMain > ul > li > a.done .stepNumber {
    background: var(--success) !important;
    border-color: var(--success) !important;
    color: var(--on-primary) !important;
    box-shadow: var(--shadow-1) !important;
}

/* checkmark on done (optional; remove if you want numbers) */
body.ff-app #wizard.ff-wizard.swMain > ul > li > a.done .stepNumber {
    font-size: 0 !important;
}

    body.ff-app #wizard.ff-wizard.swMain > ul > li > a.done .stepNumber::after {
        content: "✓" !important;
        font-size: 16px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

body.ff-app #wizard.ff-wizard .stepDesc {
    display: block !important;
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    max-width: 200px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.ff-app #wizard.ff-wizard.swMain > ul > li > a.selected:not(.done) .stepDesc,
body.ff-app #wizard.ff-wizard.swMain > ul > li > a.done .stepDesc {
    color: var(--text) !important;
    font-weight: 600 !important;
}

/* hover */
@media (hover:hover) {
    body.ff-app #wizard.ff-wizard.swMain > ul > li > a {
        transition: background .15s ease, transform .15s ease;
    }

        body.ff-app #wizard.ff-wizard.swMain > ul > li > a:hover {
            background: var(--surface-2) !important;
        }

            body.ff-app #wizard.ff-wizard.swMain > ul > li > a:hover .stepNumber {
                transform: translateY(-1px);
            }
}

svg text {
    fill: var(--ff-text) !important; /* your token */
}

/* Only icons you explicitly mark as destructive */
.ff-icon-clear {
    color: var(--clear) !important;
    width: 26px !important;
    height: 26px !important;
    line-height: 26px !important;
    border-radius: 999px !important;
    opacity: .85;
}

    .ff-icon-clear:hover {
        opacity: 1;
        color: var(--clear-hover) !important;
        border-color: color-mix(in srgb, var(--clear-hover) 65%, var(--border)) !important;
        background: color-mix(in srgb, var(--clear-hover) 10%, var(--surface)) !important;
    }

    .ff-icon-clear:active {
        color: var(--clear-active) !important;
    }


.nav-tabs > li > a{
    background-color: var(--suface);
}

.nav-tabs > li > a:hover{
    background-color: var(--surface-2);
}

.nav-tabs > li.active > a{
    background-color: var(--text-muted) !important;
}
.panel {
    color: var(--text);
}

@media (min-width: 768px) {
    .nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:focus, .nav-tabs.nav-justified > .active > a:hover {
        border-bottom-color: var(--border);
    }
}

.nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:focus, .nav-tabs.nav-justified > .active > a:hover {
    border: 1px solid var(--border);
}

li.uib-tab.nav-item a {
    color: var(--text) !important;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus {
    color: var(--on-primary) !important;
}

/* =========================================================
   TABLES: border + hover styling (token-based, no new vars)
   Drop-in override to replace the old pink hover rule.
   ========================================================= */

/* 1) Normal state: make table borders match your theme tokens (instead of Bootstrap #ddd) */
body.ff-app .table-bordered,
body.ff-app .table-bordered > thead > tr > th,
body.ff-app .table-bordered > tbody > tr > th,
body.ff-app .table-bordered > tbody > tr > td,
body.ff-app .table-bordered > tfoot > tr > th,
body.ff-app .table-bordered > tfoot > tr > td {
    border-color: var(--border); /* uses your existing --border (#d0d7de) */
}

/* 2) Hover state: replace pink with a subtle primary-tinted surface */
body.ff-app .table-hover > tbody > tr:hover > td,
body.ff-app .table-hover > tbody > tr:hover > th {
    /* Subtle highlight that fits your palette */
    background-color: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

/* 3) Optional: if you also want a clearer separation on hover for bordered tables */
body.ff-app .table-hover.table-bordered > tbody > tr:hover > td,
body.ff-app .table-hover.table-bordered > tbody > tr:hover > th {
    /* Slightly stronger edge to match the hover without looking harsh */
    border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
}

/* 4) Optional: keyboard accessibility (tabbing into links/buttons inside a row)
   Gives a similar effect as hover when a child control is focused */
body.ff-app .table-hover > tbody > tr:focus-within > td,
body.ff-app .table-hover > tbody > tr:focus-within > th {
    background-color: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

/* =========================================
   Range Picker: fix inner rounding + borders
   (scoped to .input-group.range-picker)
   ========================================= */

body.ff-app .input-group.range-picker {
    /* Stop relying on Bootstrap's table-cell expectations (your markup wraps inputs) */
    display: flex !important;
    align-items: stretch;
    width: 100%;
    max-width: 248px;
}

    body.ff-app .input-group.range-picker .start-date,
    body.ff-app .input-group.range-picker .end-date {
        flex: 0 0 112px;
        min-width: 0; /* prevents overflow pushing layout */
        max-width: 112px;
    }

        body.ff-app .input-group.range-picker .start-date .input-icon,
        body.ff-app .input-group.range-picker .end-date .input-icon {
            display: block;
            height: 100%;
        }

    /* IMPORTANT: override your global input[type="text"] rule that forces radius 0 */
    body.ff-app .input-group.range-picker input.form-control[type="text"] {
        border: 1px solid var(--border) !important;
        background: var(--surface) !important;
        color: var(--text) !important;
        border-radius: var(--radius-sm) !important; /* baseline (outer corners) */
        box-shadow: none !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 34px !important;
        min-height: 34px !important;
        line-height: 20px !important;
        padding-left: 24px !important;
        padding-right: 4px !important;
    }

    /* Left input: remove INNER (right) rounding + avoid double border with "to" */
    body.ff-app .input-group.range-picker .start-date input.form-control[type="text"] {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-right: 0 !important;
    }

    /* Right input: remove INNER (left) rounding + avoid double border with "to" */
    body.ff-app .input-group.range-picker .end-date input.form-control[type="text"] {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-left: 0 !important;
    }

    /* The "to" pill in the middle */
    body.ff-app .input-group.range-picker .input-group-addon {
        display: flex !important;
        align-items: center;
        justify-content: center;
        /* keep it crisp + square so it butts up cleanly */
        border-radius: 0 !important;
        /* match borders so the join looks seamless */
        border-top: 1px solid var(--border) !important;
        border-bottom: 1px solid var(--border) !important;
        border-left: 1px solid var(--border) !important;
        border-right: 1px solid var(--border) !important;
        line-height: 1 !important;
    }

    /* Your class makes the "to" too tight; fix only inside range-picker */
    body.ff-app .input-group.range-picker .input-group-addon-less-padding {
        padding: 0 !important;
    }

    /* A) Segmented divider */
    body.ff-app .input-group.range-picker .input-group-addon {
        background: var(--surface) !important; /* neutral */
        color: var(--text-muted, var(--text)) !important;
        font-weight: 600;
        flex: 0 0 24px;
        width: 24px !important;
        min-width: 24px !important;
        padding: 0 !important;
        border-left: 1px solid var(--border) !important;
        border-right: 1px solid var(--border) !important;
        border-top: 1px solid var(--border) !important;
        border-bottom: 1px solid var(--border) !important;
        border-radius: 0 !important;
    }

/* Date inputs: show pointer cursor */
body.ff-app .range-picker .start-date input.form-control,
body.ff-app .range-picker .end-date input.form-control {
    cursor: pointer;
}

/* Let clicks pass through the calendar icon to the input underneath */
body.ff-app .range-picker .start-date .ti-calendar,
body.ff-app .range-picker .end-date .ti-calendar {
    pointer-events: none;
}

/* Force the calendar icon to stay visible (some themes hide it on input:focus) */
body.ff-app .input-group.range-picker .input-icon > i.ti-calendar,
body.ff-app .input-group.range-picker .input-icon > input.form-control:focus + i.ti-calendar,
body.ff-app .input-group.range-picker .input-icon > input.form-control:focus ~ i.ti-calendar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    top: 0;
    left:4px;
    line-height:34px;
    font-size: 16px;
}

/* Optional: if you don’t want the “text caret” to show in readonly date fields */
body.ff-app .input-group.range-picker input.form-control[readonly] {
    caret-color: transparent;
}



/* =========================================
   Single datepicker: match range-picker look
   Apply only to .ff-date-icon so we don't affect other input-icon fields
   ========================================= */

body.ff-app .ff-date-icon {
    position: relative;
    display: block;
}

    body.ff-app .ff-date-icon > input.form-control {
        cursor: pointer;
        padding-left: 40px !important; /* room for bigger icon */
    }

        /* Keep icon visible and sized like the range-picker */
        body.ff-app .ff-date-icon > i.ti-calendar,
        body.ff-app .ff-date-icon > input.form-control:focus + i.ti-calendar,
        body.ff-app .ff-date-icon > input.form-control:focus ~ i.ti-calendar {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            position: absolute;
            left: 8px;
            top: 0;
            line-height: 30px; /* match your .form-control height */
            font-size: 16px !important;
            width: 18px;
            text-align: center;
            pointer-events: none; /* click passes through */
        }

        /* Optional: hide caret on readonly date inputs */
        body.ff-app .ff-date-icon > input.form-control[readonly] {
            caret-color: transparent;
        }

body.ff-app input.form-control[uib-datepicker-popup] {
    min-width: 140px;
}


/* =========================================
   Mapbox Geocoder -> match ff form controls
   Scope to ff pages so it doesn't affect other embeds
   ========================================= */

body.ff-app .ff-page .mapboxgl-ctrl-geocoder.mapboxgl-ctrl {
    width: 100% !important;
    max-width: none !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    font-family: inherit !important;
    /* match your input height */
    display: flex !important;
    align-items: center !important;
}

/* The actual input */
body.ff-app .ff-page .mapboxgl-ctrl-geocoder--input {
    background: transparent !important;
    color: var(--text) !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 13px !important; /* match your inputs */
    padding: 0 40px 0 34px !important; /* room for icons */
    width: 100% !important;
}

    /* Placeholder color */
    body.ff-app .ff-page .mapboxgl-ctrl-geocoder--input::placeholder {
        color: var(--text-muted, #888) !important;
    }

/* Left search icon positioning + color */
body.ff-app .ff-page .mapboxgl-ctrl-geocoder--icon-search {
    left: 7px !important;
    top: 50% !important;
    transform: translateY(-50%);
    fill: var(--text-muted, #666) !important;
    opacity: 0.75 !important;
}

/* Right side controls (clear/loading) */
body.ff-app .ff-page .mapboxgl-ctrl-geocoder--pin-right {
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%);
}

body.ff-app .ff-page .mapboxgl-ctrl-geocoder--button {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Focus state similar to your form controls */
body.ff-app .ff-page .mapboxgl-ctrl-geocoder.mapboxgl-ctrl:focus-within {
    border-color: var(--primary) !important;
}

/* Suggestions dropdown: match surface + borders */
body.ff-app .ff-page .mapboxgl-ctrl-geocoder .suggestions {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
    overflow: hidden;
    margin-top: 4px !important;
}

    body.ff-app .ff-page .mapboxgl-ctrl-geocoder .suggestions > li > a {
        color: var(--text) !important;
    }

        body.ff-app .ff-page .mapboxgl-ctrl-geocoder .suggestions > li.active > a,
        body.ff-app .ff-page .mapboxgl-ctrl-geocoder .suggestions > li > a:hover {
            background: rgba(0,0,0,.04) !important; /* keep neutral */
        }


.mapboxgl-ctrl-geocoder--input {
    height: 30px;
}

@media screen and (min-width: 640px) {
    .mapboxgl-ctrl-geocoder--input {
        height: 30px;
    }
    }

/* Mapbox geocoder placeholder styling */
body.ff-app .ff-page .mapboxgl-ctrl-geocoder--input::placeholder {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--text-muted) !important;
    opacity: .75 !important;
}

/* Vendor fallbacks */
body.ff-app .ff-page .mapboxgl-ctrl-geocoder--input::-webkit-input-placeholder {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--text-muted) !important;
    opacity: .75 !important;
}

body.ff-app .ff-page .mapboxgl-ctrl-geocoder--input::-moz-placeholder {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--text-muted) !important;
    opacity: .75 !important;
}

body.ff-app .ff-page .mapboxgl-ctrl-geocoder--input:-ms-input-placeholder {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--text-muted) !important;
    opacity: .75 !important;
}

.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--pin-right > * {
    z-index: 2;
    position: absolute;
    right: 8px;
    top: -9px;
    display: none;
}

@media screen and (min-width: 640px) {
    .mapboxgl-ctrl-geocoder--icon-close {
        width: 16px;
        height: 16px;
        margin-top: 0;
        margin-right: 0;
    }
}

/* Center the back-to-top button in the footer, regardless of left/right content */
#app > footer .footer-inner {
    position: relative; /* anchor for absolute centering */
}

    /* The wrapper that contains the go-top button */
    #app > footer .footer-inner > .pull-right:has(.go-top) {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        float: none !important;
        line-height: normal; /* avoid line-height 50px shifting */
        z-index: 2;
    }

    /* Ensure side content doesn't overlap the centered button */
    #app > footer .footer-inner > .pull-left,
    #app > footer .footer-inner > .pull-right:not(:has(.go-top)) {
        position: relative;
        z-index: 1;
    }

#app > footer .footer-inner {
    position: relative;
}

    #app > footer .footer-inner .footer-go-top {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

.label-inverse{
    color:var(--surface);
}


/* =========================================
   FF Imaging – consolidated drop-in rules
   (Queue | Index Rail | Preview)
   ========================================= */

body.ff-app .ff-imaging #content-wrapper {
    padding: 6px 10px;
}

body.ff-app .ff-imaging .ff-scan-main {
    padding: 8px 10px !important;
}

body.ff-app .ff-imaging .ff-scan-main > .row {
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-imaging .ff-scan-main .col-md-12.padding-left-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-imaging .ff-scan-index-fieldset {
    margin-bottom: 4px !important;
    padding: 8px 10px 6px !important;
}

body.ff-app .ff-imaging .ff-scan-index-fieldset > .row {
    margin-left: -5px;
    margin-right: -5px;
}

body.ff-app .ff-imaging .ff-scan-index-fieldset > .row > [class*="col-"] {
    padding-left: 5px;
    padding-right: 5px;
}

body.ff-app .ff-imaging .ff-scan-index-form .form-group {
    margin-bottom: 4px !important;
}

body.ff-app .ff-imaging .ff-scan-index-form label {
    margin-bottom: 1px !important;
}

body.ff-app .ff-imaging .ff-scan-index-action-row {
    margin-top: 2px;
    padding-bottom: 0 !important;
}

body.ff-app .ff-imaging .ff-scan-index-actions {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
}

body.ff-app .ff-imaging .ff-scan-index-actions .btn {
    height: 34px;
    margin: 0;
}

body.ff-app .ff-imaging .ff-scan-index-button {
    flex: 0 0 180px;
    max-width: 220px;
}

body.ff-app .ff-imaging .ff-scan-icon-button {
    align-items: center;
    display: inline-flex;
    flex: 0 0 34px;
    justify-content: center;
    min-width: 34px;
    padding-left: 0;
    padding-right: 0;
    width: 34px;
}

body.ff-app .ff-imaging .ff-scan-preview-meta {
    align-items: center;
    color: var(--text-muted);
    display: flex;
    font-size: 12px;
    font-weight: 700;
    justify-content: center;
    min-height: 18px;
    padding: 0 0 2px;
}

body.ff-app .ff-imaging .ff-scan-preview-meta label {
    margin: 0;
}

body.ff-app .ff-imaging .ff-scan-preview-frame {
    height: calc(100vh - 285px);
    min-height: 420px;
}

body.ff-app .ff-imaging .ff-scan-preview-frame embed {
    border: 0;
    display: block;
    height: 100%;
    width: 100%;
}

@media (max-width: 992px) {
    body.ff-app .ff-imaging .ff-scan-index-actions {
        flex-wrap: wrap;
    }

    body.ff-app .ff-imaging .ff-scan-index-button {
        flex: 1 1 180px;
        max-width: none;
    }

    body.ff-app .ff-imaging .ff-scan-preview-frame {
        height: 65vh;
    }
}

/* --- Main grid layout --- */
body.ff-app .ff-imaging .ff-imaging-grid {
    display: grid;
    grid-template-columns: minmax(420px, 460px) 360px minmax(520px, 1fr);
    gap: 14px;
    align-items: start;
}

/* --- Cards --- */
body.ff-app .ff-imaging .ff-imaging-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
    overflow: hidden;
}

body.ff-app .ff-imaging .ff-imaging-card__head {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

body.ff-app .ff-imaging .ff-imaging-card__title {
    margin: 0;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* --- Queue panel --- */
body.ff-app .ff-imaging .ff-imaging-queue__body {
    padding: 12px 12px 14px;
}

body.ff-app .ff-imaging .ff-imaging-queue__filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

    body.ff-app .ff-imaging .ff-imaging-queue__filters .btn {
        border-radius: 999px;
        padding: 5px 10px;
    }

body.ff-app .ff-imaging .ff-imaging-queue__table {
    height: calc(100vh - 280px);
    min-height: 420px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

    body.ff-app .ff-imaging .ff-imaging-queue__table thead td {
        position: sticky;
        top: 0;
        background: var(--surface);
        z-index: 2;
    }

    body.ff-app .ff-imaging .ff-imaging-queue__table td {
        padding: 6px 8px;
    }

        body.ff-app .ff-imaging .ff-imaging-queue__table td:last-child {
            white-space: normal;
            word-break: break-word;
        }

/* --- Index rail --- */
body.ff-app .ff-imaging .ff-imaging-index__body {
    padding: 12px 12px 14px;
}

/* Condense vertical rhythm ONLY for the index form */
body.ff-app .ff-imaging .ff-imaging-index-form .row {
    margin-bottom: 0 !important;
}

body.ff-app .ff-imaging .ff-imaging-index-form .form-group {
    margin-bottom: 0 !important;
}

body.ff-app .ff-imaging .ff-imaging-index-form label {
    margin-bottom: 0 !important;
}

/* Selected doc banner */
body.ff-app .ff-imaging .ff-imaging-selected {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    padding: 10px;
    margin-bottom: 10px;
}

body.ff-app .ff-imaging .ff-imaging-selected__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}

body.ff-app .ff-imaging .ff-imaging-selected__value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Skinny form: one field per row */
body.ff-app .ff-imaging .ff-imaging-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.ff-app .ff-imaging .ff-imaging-field label {
    display: block;
    margin-bottom: 4px;
}

body.ff-app .ff-imaging .ff-imaging-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 6px;
}

    body.ff-app .ff-imaging .ff-imaging-actions .btn {
        height: 34px;
    }

    body.ff-app .ff-imaging .ff-imaging-actions .btn-index {
        flex: 1 1 auto;
    }

/* --- Preview panel --- */
body.ff-app .ff-imaging .ff-imaging-preview {
    position: sticky;
    top: 92px; /* adjust if header height changes */
}

body.ff-app .ff-imaging .ff-imaging-preview__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

body.ff-app .ff-imaging .ff-imaging-preview__count {
    font-size: 12px;
    color: var(--text-muted);
}

body.ff-app .ff-imaging .ff-imaging-preview__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.ff-app .ff-imaging .ff-imaging-preview__body {
    padding: 0;
    height: calc(100vh - 170px);
    min-height: 520px;
}

    body.ff-app .ff-imaging .ff-imaging-preview__body embed,
    body.ff-app .ff-imaging .ff-imaging-preview__body iframe {
        width: 100%;
        height: 100%;
        display: block;
        border: 0;
    }

body.ff-app .ff-imaging .ff-imaging-empty {
    padding: 16px;
    color: var(--text-muted);
    text-align: center;
}

/* --- Upload input: hide accessibly (keeps label click working) --- */
body.ff-app .ff-imaging .ff-upload-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* --- Inputs in Imaging should match app surface --- */
body.ff-app .ff-imaging .form-control,
body.ff-app .ff-imaging .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-imaging .ui-select-bootstrap .ui-select-search {
    background: var(--surface) !important; /* change to transparent if preferred */
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* --- Date + Time row (no outer edge padding) --- */
body.ff-app .ff-imaging .ff-dt-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-imaging .ff-dt-col-left {
    padding-left: 0 !important;
    padding-right: 6px !important;
}

body.ff-app .ff-imaging .ff-dt-col-right {
    padding-left: 6px !important;
    padding-right: 0 !important;
}

/* Compact time control */
body.ff-app .ff-imaging .ff-time-compact {
    width: 96px;
    min-width: 88px;
    max-width: 100%;
    padding-left: 10px;
    padding-right: 6px;
    display: inline-block;
}

/* --- Responsive --- */
@media (max-width: 1400px) {
    body.ff-app .ff-imaging .ff-imaging-grid {
        grid-template-columns: 320px 1fr;
    }

    body.ff-app .ff-imaging .ff-imaging-preview {
        grid-column: 1 / -1;
        position: relative;
        top: auto;
    }

    body.ff-app .ff-imaging .ff-imaging-preview__body {
        height: 70vh;
    }
}

@media (max-width: 992px) {
    body.ff-app .ff-imaging .ff-imaging-grid {
        grid-template-columns: 1fr;
    }

    body.ff-app .ff-imaging .ff-imaging-queue__table {
        height: 50vh;
    }
}

/* Only a subtle left indicator */
.ff-imaging .ff-imaging-queue__table tr {
    position: relative;
}

    .ff-imaging .ff-imaging-queue__table tr::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: transparent;
    }

    .ff-imaging .ff-imaging-queue__table tr.tag-indexed::before {
        background: #f59e0b; /* amber for "Needs indexing" */
    }

    .ff-imaging .ff-imaging-queue__table tr:not(.tag-indexed)::before {
        background: #22c55e; /* green for "Indexed" */
    }

/* ---- Kill the harsh red/green styling (override whatever exists) ---- */
body.ff-app .ff-imaging .ff-imaging-queue__table tr,
body.ff-app .ff-imaging .ff-imaging-queue__table tr td {
    background: transparent !important;
    color: var(--text) !important;
}

    /* Selected row: subtle highlight */
    body.ff-app .ff-imaging .ff-imaging-queue__table tr.row-selected td {
        background: rgba(59,130,246,.10) !important; /* subtle primary tint */
    }

/* Left status bar indicator */
body.ff-app .ff-imaging .ff-imaging-queue__table tr {
    position: relative;
}

    body.ff-app .ff-imaging .ff-imaging-queue__table tr::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: transparent;
    }

    /* Needs indexing (your existing tag-indexed class) */
    body.ff-app .ff-imaging .ff-imaging-queue__table tr.tag-indexed::before {
        background: #f59e0b; /* amber */
    }

    /* Indexed rows: muted text */
    body.ff-app .ff-imaging .ff-imaging-queue__table tr:not(.tag-indexed):not(.row-selected) td {
        color: var(--on-primary) !important;
    }

    /* =========================================
   Imaging Queue: token-safe status styling
   ========================================= */

    /* Remove any legacy harsh row coloring */
    body.ff-app .ff-imaging .ff-imaging-queue__table tr,
    body.ff-app .ff-imaging .ff-imaging-queue__table tr td {
        background: transparent !important;
        color: var(--text) !important;
    }

        /* Selected row highlight derived from the primary seed */
        body.ff-app .ff-imaging .ff-imaging-queue__table tr.row-selected td {
            background: var(--nav-active-bg) !important; /* derived from --primary-seed */
        }

        body.ff-app .ff-imaging .ff-imaging-queue__table tr.row-selected {
            box-shadow: inset 0 0 0 1px var(--nav-active-border); /* derived from --primary-seed */
        }

/* Compact table cells a bit */
body.ff-app .ff-imaging .ff-imaging-queue__table td {
    padding: 6px 8px;
    vertical-align: middle;
}

/* Status chip (uses semantic tokens only) */
body.ff-app .ff-imaging .ff-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

/* Needs indexing = warning/orange (matches your warning token / "tab" vibe) */
body.ff-app .ff-imaging .ff-status--todo {
    color: color-mix(in srgb, var(--warning) 70%, var(--text));
    background: var(--warning-bg);
    border-color: var(--warning-brd);
}

/* Indexed = success/green but subtle */
body.ff-app .ff-imaging .ff-status--ok {
    color: color-mix(in srgb, var(--success) 70%, var(--text));
    background: var(--success-bg);
    border-color: var(--success-brd);
}

/* Optional: tiny dot inside chip for extra clarity */
body.ff-app .ff-imaging .ff-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    opacity: .9;
}

/* Info button ("i" bubble) */
body.ff-app .ff-imaging .ff-rowinfo {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

    body.ff-app .ff-imaging .ff-rowinfo:hover {
        border-color: var(--nav-active-border);
        background: var(--surface-2);
        color: var(--text);
    }

/* Popover styling (token-compliant) */
body.ff-app .ff-imaging .popover {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-1) !important;
    border-radius: var(--radius-sm) !important;
    max-width: 320px;
}

    body.ff-app .ff-imaging .popover .popover-content {
        color: var(--text);
        font-size: 12px;
    }

body.ff-app .ff-imaging .ff-pop-title {
    font-weight: 800;
    font-size: 12px;
    margin-bottom: 6px;
}

body.ff-app .ff-imaging .ff-pop-grid {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 6px 10px;
}

body.ff-app .ff-imaging .ff-pop-k {
    color: var(--text-muted);
}

body.ff-app .ff-imaging .ff-pop-v {
    color: var(--text);
    word-break: break-word;
}

/* =========================================
   Queue filter pills (token-only colors)
   ========================================= */

body.ff-app {
    /* If you haven't added these yet, they derive from existing tokens */
    --warning-bg: color-mix(in srgb, transparent 88%, var(--warning));
    --warning-brd: color-mix(in srgb, transparent 55%, var(--warning));
    --primary-bg: var(--nav-active-bg); /* derived from --primary-seed */
    --primary-brd: var(--nav-active-border); /* derived from --primary-seed */
}

    body.ff-app[data-theme="dark"] {
        --warning-bg: color-mix(in srgb, transparent 78%, var(--warning));
        --warning-brd: color-mix(in srgb, transparent 40%, var(--warning));
    }

    /* Base pill */
    body.ff-app .ff-imaging .ff-qfilter {
        appearance: none;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
        border-radius: 999px;
        padding: 5px 10px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
    }

    /* Active state (seed-derived for ALL/INDEX) */
    body.ff-app .ff-imaging .ff-qfilter--all.is-active,
    body.ff-app .ff-imaging .ff-qfilter--indexed.is-active {
        background: var(--primary-bg);
        border-color: var(--primary-brd);
        color: var(--text);
    }

    /* UNINDEX uses warning token (orange) */
    body.ff-app .ff-imaging .ff-qfilter--unindexed {
        border-color: var(--warning-brd);
        color: color-mix(in srgb, var(--warning) 80%, var(--text));
        background: var(--warning-bg);
    }

        /* UNINDEX active can be slightly stronger (still token-derived) */
        body.ff-app .ff-imaging .ff-qfilter--unindexed.is-active {
            background: color-mix(in srgb, var(--warning-bg) 70%, var(--surface));
            border-color: var(--warning);
        }

    /* Disabled (ALL/INDEX/UNINDEX) */
    body.ff-app .ff-imaging .ff-qfilter:disabled {
        cursor: not-allowed;
        background: var(--surface-2);
        border-color: var(--border);
        color: var(--text-disabled);
        opacity: 1; /* keep consistent; don't fade */
    }

    /* Ensure disabled UNINDEX is NOT orange */
    body.ff-app .ff-imaging .ff-qfilter--unindexed:disabled {
        background: var(--surface-2);
        border-color: var(--border);
        color: var(--text-disabled);
    }

    body.ff-app .ff-imaging .popover {
        width: 320px;
        max-width: 360px !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-sm) !important;
        box-shadow: var(--shadow-1) !important;
        background: var(--surface) !important;
    }

        body.ff-app .ff-imaging .popover .popover-content {
            padding: 12px 12px !important;
            color: var(--text);
            font-size: 12px;
        }

    body.ff-app .ff-imaging .ff-pop-title {
        font-weight: 800;
        font-size: 12px;
        margin-bottom: 8px;
        color: var(--text);
    }

    body.ff-app .ff-imaging .ff-pop-grid {
        display: grid;
        grid-template-columns: 84px 1fr;
        gap: 6px 10px;
    }

    body.ff-app .ff-imaging .ff-pop-k {
        color: var(--text-muted);
    }

    body.ff-app .ff-imaging .ff-pop-v {
        color: var(--text);
        font-weight: 600;
        min-width: 0;
        word-break: break-word;
    }

    /* =========================================
   Token-safe Popover styling (UI Bootstrap)
   Works with append-to-body + light/dark
   ========================================= */

    /* Target ALL uib popovers (they may be appended to body, so don't rely on .ff-imaging parent) */
    body.ff-app [uib-popover-popup].popover,
    body.ff-app [uib-popover-html-popup].popover,
    body.ff-app [uib-popover-template-popup].popover,
    body.ff-app .popover {
        font-family: inherit !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        background: var(--surface) !important;
        color: var(--text) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-sm) !important;
        box-shadow: var(--shadow-1) !important;
        max-width: 360px !important;
        width: 320px;
        padding: 0 !important; /* we'll control padding inside */
    }

        /* Content padding */
        body.ff-app [uib-popover-popup].popover .popover-content,
        body.ff-app [uib-popover-html-popup].popover .popover-content,
        body.ff-app [uib-popover-template-popup].popover .popover-content,
        body.ff-app .popover .popover-content {
            padding: 12px 12px !important;
            background: transparent !important;
            color: var(--text) !important;
        }

        /* If a title is ever used */
        body.ff-app [uib-popover-popup].popover .popover-title,
        body.ff-app [uib-popover-html-popup].popover .popover-title,
        body.ff-app [uib-popover-template-popup].popover .popover-title,
        body.ff-app .popover .popover-title {
            background: var(--surface-2) !important;
            color: var(--text) !important;
            border-bottom: 1px solid var(--border) !important;
            font-weight: 700 !important;
        }

        /* Arrow must match surface + border (Bootstrap uses rgba(0,0,0,...) by default) */
        body.ff-app .popover > .arrow,
        body.ff-app .popover > .arrow:after {
            border-color: transparent !important;
        }

        /* Right placement arrow */
        body.ff-app .popover.right > .arrow {
            border-right-color: var(--border) !important;
        }

            body.ff-app .popover.right > .arrow:after {
                border-right-color: var(--surface) !important;
            }

        /* Left placement arrow */
        body.ff-app .popover.left > .arrow {
            border-left-color: var(--border) !important;
        }

            body.ff-app .popover.left > .arrow:after {
                border-left-color: var(--surface) !important;
            }

        /* Top placement arrow */
        body.ff-app .popover.top > .arrow {
            border-top-color: var(--border) !important;
        }

            body.ff-app .popover.top > .arrow:after {
                border-top-color: var(--surface) !important;
            }

        /* Bottom placement arrow */
        body.ff-app .popover.bottom > .arrow {
            border-bottom-color: var(--border) !important;
        }

            body.ff-app .popover.bottom > .arrow:after {
                border-bottom-color: var(--surface) !important;
            }

    /* Your popover internal layout */
    body.ff-app .ff-pop-title {
        font-weight: 800;
        font-size: 12px;
        margin-bottom: 8px;
        color: var(--text) !important;
    }

    body.ff-app .ff-pop-grid {
        display: grid;
        grid-template-columns: 84px 1fr;
        gap: 6px 10px;
    }

    body.ff-app .ff-pop-k {
        color: var(--text-muted) !important;
    }

    body.ff-app .ff-pop-v {
        color: var(--text) !important;
        font-weight: 600;
        min-width: 0;
        word-break: break-word;
    }

    /* Scan buttons when prerequisites are missing: look "disabled-ish" but still clickable */
    body.ff-app .ff-imaging .ff-action--requires-setup {
        opacity: 1;
        border-color: var(--border);
        background: var(--surface-2);
        color: var(--text-muted);
    }

        body.ff-app .ff-imaging .ff-action--requires-setup:hover {
            border-color: var(--warning);
            box-shadow: 0 0 0 2px color-mix(in srgb, transparent 80%, var(--warning));
            color: var(--text);
        }

    /* =========================================
   Scan prereq modal polish (token-safe)
   ========================================= */

    body.ff-app .modal-content {
        border-radius: var(--radius-md);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-1);
    }

    /* Header */
    body.ff-app .modal-header {
        padding: 14px 18px;
        border-bottom: 1px solid var(--divider);
        background: var(--surface);
        border-top-left-radius: var(--radius-md);
        border-top-right-radius: var(--radius-md);
    }

    body.ff-app .modal-title {
        font-weight: 800;
        font-size: 16px;
        color: var(--text);
        display: flex;
        align-items: center;
        gap: 10px;
    }

        body.ff-app .modal-title .fa {
            color: var(--info);
        }

    /* Body */
    body.ff-app .modal-body {
        padding: 18px 18px 10px;
        color: var(--text);
    }

        body.ff-app .modal-body p {
            margin-bottom: 10px;
            color: var(--text);
        }

        body.ff-app .modal-body ol {
            margin: 8px 0 14px 22px;
            color: var(--text);
        }

            body.ff-app .modal-body ol li {
                margin-bottom: 6px;
            }

        /* Download buttons: consistent height + tighter */
        body.ff-app .modal-body .btn.btn-primary.btn-block {
            height: 40px;
            border-radius: var(--radius-sm);
            font-weight: 800;
            letter-spacing: .01em;
        }

        /* Small helper text under download buttons */
        body.ff-app .modal-body small {
            color: var(--text-muted);
            line-height: 1.35;
        }

        /* Callout box (replace “alert” look) */
        body.ff-app .modal-body .alert {
            margin-top: 14px !important;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border) !important;
            background: var(--surface-2) !important;
            color: var(--text) !important;
            padding: 12px 12px !important;
        }

    /* Footer */
    body.ff-app .modal-footer {
        padding: 12px 18px;
        border-top: 1px solid var(--divider);
        background: var(--surface-2);
        border-bottom-left-radius: var(--radius-md);
        border-bottom-right-radius: var(--radius-md);
    }

        /* Footer buttons */
        body.ff-app .modal-footer .btn {
            height: 34px;
            border-radius: var(--radius-sm);
            padding: 0 14px;
            font-weight: 700;
        }

            /* Make the secondary button feel calmer */
            body.ff-app .modal-footer .btn.btn-default {
                background: var(--surface);
                border-color: var(--border);
                color: var(--text);
            }

                body.ff-app .modal-footer .btn.btn-default:hover {
                    background: var(--surface-2);
                }

            /* Improve spacing between footer buttons */
            body.ff-app .modal-footer .btn + .btn {
                margin-left: 10px;
            }

    /* =========================================
   Modal download button polish
   ========================================= */

    body.ff-app .modal-body .ff-dl-btn {
        height: 44px; /* slightly taller = more premium */
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 0 14px !important; /* override bootstrap padding */
        line-height: 1 !important;
        border-radius: var(--radius-sm) !important;
        font-weight: 800 !important;
        font-size: 13px !important;
        letter-spacing: .01em;
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: var(--on-primary) !important;
        text-decoration: none !important;
    }

        /* Icon sizing/alignment */
        body.ff-app .modal-body .ff-dl-btn > i.fa {
            font-size: 14px;
            line-height: 1;
        }

        /* Hover/active using your derived tokens */
        body.ff-app .modal-body .ff-dl-btn:hover {
            background: var(--primary-hover) !important;
            border-color: var(--primary-hover) !important;
            color: var(--on-primary) !important;
        }

        body.ff-app .modal-body .ff-dl-btn:active {
            background: var(--primary-active) !important;
            border-color: var(--primary-active) !important;
        }

        /* Focus ring uses token */
        body.ff-app .modal-body .ff-dl-btn:focus {
            outline: none !important;
            box-shadow: 0 0 0 3px var(--focus) !important;
        }

        /* Make the helper text sit closer + read nicer */
        body.ff-app .modal-body .ff-dl-btn + small {
            margin-top: 8px !important;
            display: block;
            color: var(--text-muted) !important;
            line-height: 1.35;
        }

    /* ============================================================
   Pending Queue table: header = primary/onPrimary
   body = surface/text
   selected = nav-active-bg
   hover = lighter version of nav-active-bg (derived from tokens)
   ============================================================ */

    body.ff-app .ff-imaging #pendingQueueTable {
        /* tokens */
        --pq-selected-bg: var(--nav-active-bg);
        /* fallback hover (if color-mix unsupported) */
        --pq-hover-bg: var(--topbar-hover);
    }

/* Derive hover from tokens: mix selected bg with surface to make it lighter */
@supports (background: color-mix(in srgb, black, white)) {
    body.ff-app .ff-imaging #pendingQueueTable {
        /* tweak the % to taste: more surface = lighter */
        --pq-hover-bg: color-mix(in srgb, var(--nav-active-bg) 70%, var(--surface) 30%);
    }
}

/* HEADER */
body.ff-app .ff-imaging #pendingQueueTable thead td {
    background: var(--primary) !important;
    color: var(--on-primary) !important;
    position: sticky;
    top: 0;
    z-index: 2;
}

/* BODY baseline: always readable */
body.ff-app .ff-imaging #pendingQueueTable tbody td {
    background: var(--surface) !important;
    color: var(--text) !important;
}

/* Body baseline: explicitly beat the problematic rule */
body.ff-app .ff-imaging #pendingQueueTable tbody tr:not(.tag-indexed):not(.row-selected) td {
    background: var(--surface) !important;
    color: var(--text) !important;
}

/* SELECTED row (no hover reaction) */
body.ff-app .ff-imaging #pendingQueueTable tbody tr.row-selected td {
    background: var(--pq-selected-bg) !important;
    color: var(--text) !important;
}

/* HOVER only for NON-selected rows */
body.ff-app .ff-imaging #pendingQueueTable tbody tr:not(.row-selected):hover td {
    background: var(--pq-hover-bg) !important;
    color: var(--text) !important;
}

/* Safety: if any other hover rule exists elsewhere, force selected to stay selected */
body.ff-app .ff-imaging #pendingQueueTable tbody tr.row-selected:hover td {
    background: var(--pq-selected-bg) !important;
    color: var(--text) !important;
}
/* ============================================================
   #pendingQueueTable — BORDER SYSTEM RESET + REBUILD (token-based)
   Goal: flawless single-source-of-truth borders (no clashes with Bootstrap)
   ============================================================ */

body.ff-app .ff-imaging #pendingQueueTable {
    /* Border tokens (single palette) */
    --pq-border: var(--border);
    /* Slightly stronger divider for header row (derived, not hard-coded) */
    --pq-border-strong: var(--border);
}

/* Derive a stronger header divider from tokens (if supported) */
@supports (border-color: color-mix(in srgb, black, white)) {
    body.ff-app .ff-imaging #pendingQueueTable {
        /* Mix border with text a bit to increase contrast */
        --pq-border-strong: color-mix(in srgb, var(--border) 70%, var(--text) 30%);
    }
}

/* --- TABLE FRAME --- */
body.ff-app .ff-imaging #pendingQueueTable {
    border-collapse: separate !important; /* needed for clean radius + predictable dividers */
    border-spacing: 0 !important;
    /* One consistent outer border */
    border: 1px solid var(--pq-border) !important;
    /* Optional: modern look */
    border-radius: 10px;
    background: var(--surface) !important;
    /* Helps avoid weird “double edges”/bleed */
    background-clip: padding-box;
}

    /* If your border-radius doesn’t clip in a particular browser/layout,
   apply overflow:hidden to the wrapper instead:
   body.ff-app .ff-imaging .ff-imaging-queue__table { border-radius:10px; overflow:hidden; }
*/

    /* --- HARD RESET any existing borders on this table (Bootstrap + legacy) --- */
    body.ff-app .ff-imaging #pendingQueueTable,
    body.ff-app .ff-imaging #pendingQueueTable * {
        border-color: var(--pq-border) !important;
    }

        body.ff-app .ff-imaging #pendingQueueTable th,
        body.ff-app .ff-imaging #pendingQueueTable td {
            /* nuke all border declarations coming from .table-bordered, etc. */
            border: 0 !important;
            /* also prevent legacy “border-like” effects from looking like random borders */
            background-clip: padding-box;
        }

        /* Normalize row shadow/border effects so borders don’t “fight” */
        body.ff-app .ff-imaging #pendingQueueTable tbody tr {
            box-shadow: none !important;
            outline: none !important;
        }

        /* --- INTERNAL GRIDLINES (single system) --- */
        /* We draw only:
   - right borders for vertical dividers
   - bottom borders for horizontal dividers
   This guarantees: no double-thick lines anywhere.
*/
        body.ff-app .ff-imaging #pendingQueueTable thead td,
        body.ff-app .ff-imaging #pendingQueueTable tbody td {
            border-right: 1px solid var(--pq-border) !important;
            border-bottom: 1px solid var(--pq-border) !important;
        }

        /* Remove right divider on the last column (outer border handles it) */
        body.ff-app .ff-imaging #pendingQueueTable tr > td:last-child,
        body.ff-app .ff-imaging #pendingQueueTable tr > th:last-child {
            border-right: 0 !important;
        }

        /* Remove bottom divider on the last body row (outer border handles it) */
        body.ff-app .ff-imaging #pendingQueueTable tbody tr:last-child > td,
        body.ff-app .ff-imaging #pendingQueueTable tbody tr:last-child > th {
            border-bottom: 0 !important;
        }

        /* Stronger divider under the header row */
        body.ff-app .ff-imaging #pendingQueueTable thead td {
            border-bottom: 1px solid var(--pq-border-strong) !important;
            font-weight: bold;
        }

        /* Optional: if you want a subtle vertical emphasis in the header only,
   keep the same pq-border; otherwise omit. (Already covered by border-right.) */


        /* --- SELECTED ROW “BORDER” (clean + consistent) --- */
        /* Selected row gets an inset outline so it reads as selected without
   changing gridline thickness or introducing mixed border colors. */
        body.ff-app .ff-imaging #pendingQueueTable tbody tr.row-selected {
            box-shadow: inset 0 0 0 1px var(--nav-active-border) !important;
        }

            /* Make sure selected outline doesn't appear to thicken any cell borders */
            body.ff-app .ff-imaging #pendingQueueTable tbody tr.row-selected td {
                /* keep cell dividers consistent */
                border-right-color: var(--pq-border) !important;
                border-bottom-color: var(--pq-border) !important;
            }



/* Tooltips are help text only; never let them steal hover/click events from controls. */
.tooltip,
.tooltip.ff-tooltip-noevents {
    pointer-events: none;
}

/* Top navbar tooltips are appended to body so the fixed toolbar/history strip cannot cover them. */
body.ff-app > .tooltip,
body.ff-app .tooltip.ff-topnav-tooltip {
    z-index: 2147483000 !important;
    pointer-events: none !important;
}

/* Make the icon easier to hover/click (reduces accidental mouseout) */
.ff-icon-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 6px; /* bigger hit area */
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
}

    /* Optional: hover affordance without changing layout */
    .ff-icon-tooltip:hover {
        background: var(--topbar-hover);
    }

.csspinner::before{
background-color:transparent;
}

.shipmentheader {
    font-weight: 700 !important;
    margin: 0 0 8px 15px !important;
    padding: 6px 10px !important;
    background-color: var(--surface-3) !important;
    color: var(--text) !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.timeline-xs .timeline-item .shipmentheader {
    display: inline-block;
    font-weight: 700 !important;
    margin: 0 0 8px 15px !important;
    padding: 6px 10px !important;
    background-color: var(--surface-3) !important;
    color: var(--text) !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.timeline-xs .timeline-item.info {
    border-left-color: var(--primary);
}

.timeline-xs .timeline-item p,
.timeline-xs .timeline-item .text-black {
    color: var(--text) !important;
}



body.ff-app .ff-internal-tracking {
    --ff-card-pad-x: 20px;
    --ff-card-pad-y: 18px;
}

    body.ff-app .ff-internal-tracking .ff-card.panel {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-1);
        overflow: hidden;
        margin-bottom: 16px;
    }

    body.ff-app .ff-internal-tracking .ff-card-header {
        background: var(--surface-2);
        border-bottom: 1px solid var(--divider);
        padding: var(--ff-card-pad-y) var(--ff-card-pad-x);
    }

    body.ff-app .ff-internal-tracking .ff-card-body {
        padding: var(--ff-card-pad-y) var(--ff-card-pad-x);
        background: var(--surface);
    }

    body.ff-app .ff-internal-tracking .ff-card-header-main {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    body.ff-app .ff-internal-tracking .ff-card-title {
        margin: 0;
        color: var(--text) !important;
        font-size: 18px;
        font-weight: 700;
    }

    body.ff-app .ff-internal-tracking .ff-card-title-inline {
        color: var(--text-muted);
        font-weight: 600;
        margin-left: 6px;
    }

    body.ff-app .ff-internal-tracking .ff-card-meta {
        margin: 0;
        color: var(--text-muted);
        font-size: 12px;
    }

    body.ff-app .ff-internal-tracking .ff-search-grid .form-group {
        margin-bottom: 16px;
    }

    body.ff-app .ff-internal-tracking .ff-search-submit-wrap {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 74px;
    }

    body.ff-app .ff-internal-tracking .ff-search-submit {
        width: 100%;
        min-height: 40px;
    }

    body.ff-app .ff-internal-tracking .ff-tracking-summary {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid var(--divider);
    }

    body.ff-app .ff-internal-tracking .ff-summary-item {
        min-width: 140px;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface-2);
    }

    body.ff-app .ff-internal-tracking .ff-summary-label {
        display: block;
        margin-bottom: 4px;
        font-size: 11px;
        font-weight: 700;
        color: var(--text-muted);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    body.ff-app .ff-internal-tracking .ff-summary-value {
        display: block;
        color: var(--text);
        font-weight: 600;
        word-break: break-word;
    }

    body.ff-app .ff-internal-tracking .ff-results-scroll {
        max-height: 240px;
        overflow-y: auto;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
    }

    body.ff-app .ff-internal-tracking .ff-results-table {
        margin-bottom: 0;
        background: var(--surface);
    }

        body.ff-app .ff-internal-tracking .ff-results-table thead th {
            background: var(--surface-3);
            color: var(--text) !important;
            border-bottom: 1px solid var(--border);
            font-weight: 700;
        }

        body.ff-app .ff-internal-tracking .ff-results-table tbody tr:hover {
            background: var(--surface-2);
        }

    body.ff-app .ff-internal-tracking .ff-results-actions {
        margin-top: 14px;
        text-align: right;
    }

    body.ff-app .ff-internal-tracking .ff-tracking-tabs {
        margin-top: 8px;
    }

    body.ff-app .ff-internal-tracking .ff-tab-pane-wrap {
        padding-top: 12px;
    }

    body.ff-app .ff-internal-tracking .ff-sidebar-stack {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    body.ff-app .ff-internal-tracking .ff-timeline-head {
        margin: 0 0 8px 15px;
        padding: 0 0 10px;
        border-bottom: 1px solid var(--divider);
    }

    body.ff-app .ff-internal-tracking .ff-timeline-head-label {
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    body.ff-app .ff-internal-tracking .ff-timeline-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    body.ff-app .ff-internal-tracking .timeline-xs .timeline-item {
        border-left-color: var(--primary);
        padding-bottom: 14px;
    }

    body.ff-app .ff-internal-tracking .shipmentheader.ff-timeline-date {
        display: inline-block;
        margin: 0 0 8px 15px !important;
        padding: 6px 10px !important;
        background: var(--surface-3) !important;
        color: var(--text) !important;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        font-weight: 700 !important;
    }

    body.ff-app .ff-internal-tracking .ff-timeline-row {
        margin: 0 0 0 15px;
        padding: 10px 0;
        border-bottom: 1px solid var(--divider);
    }

    body.ff-app .ff-internal-tracking .timeline-item .ff-timeline-row:last-child {
        border-bottom: 0;
    }

    body.ff-app .ff-internal-tracking .ff-timeline-cell p,
    body.ff-app .ff-internal-tracking .ff-text,
    body.ff-app .ff-internal-tracking .text-black {
        color: var(--text) !important;
        margin: 0;
    }

    body.ff-app .ff-internal-tracking .ff-timeline-cell-label {
        display: none;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        margin-right: 6px;
    }

    body.ff-app .ff-internal-tracking .ff-action-link {
        color: var(--primary);
        font-weight: 600;
    }

        body.ff-app .ff-internal-tracking .ff-action-link:hover,
        body.ff-app .ff-internal-tracking .ff-action-link:focus {
            color: var(--primary-hover);
            text-decoration: underline;
        }

    body.ff-app .ff-internal-tracking .ff-notify-textarea {
        resize: vertical;
        min-height: 110px;
    }

    body.ff-app .ff-internal-tracking .ff-field-help {
        margin: 8px 0 0;
        color: var(--text-muted);
        font-size: 12px;
    }

    body.ff-app .ff-internal-tracking .ff-summary-stack {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    body.ff-app .ff-internal-tracking .ff-summary-line {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--divider);
    }

        body.ff-app .ff-internal-tracking .ff-summary-line:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

    body.ff-app .ff-internal-tracking .ff-summary-line-label {
        color: var(--text-muted);
        font-weight: 600;
        min-width: 90px;
    }

    body.ff-app .ff-internal-tracking .ff-summary-line-value {
        color: var(--text);
        font-weight: 600;
        text-align: right;
        word-break: break-word;
    }

    body.ff-app .ff-internal-tracking .ff-detail-list {
        margin: 0;
    }

    body.ff-app .ff-internal-tracking .ff-detail-item {
        display: grid;
        grid-template-columns: 130px 1fr;
        gap: 12px;
        align-items: start;
        padding: 9px 0;
        border-bottom: 1px solid var(--divider);
    }

        body.ff-app .ff-internal-tracking .ff-detail-item:last-child {
            border-bottom: 0;
        }

        body.ff-app .ff-internal-tracking .ff-detail-item dt {
            margin: 0;
            color: var(--text-muted);
            font-weight: 700;
        }

        body.ff-app .ff-internal-tracking .ff-detail-item dd {
            margin: 0;
            color: var(--text);
            font-weight: 500;
            word-break: break-word;
        }

    body.ff-app .ff-internal-tracking .ff-images-pane {
        padding: 0;
        min-height: 75vh;
    }

    body.ff-app .ff-internal-tracking .ff-images-frame {
        display: block;
        width: 100%;
        min-height: 75vh;
        border: 0;
        background: var(--surface);
    }

    body.ff-app .ff-internal-tracking .ff-empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 260px;
        text-align: center;
    }

    body.ff-app .ff-internal-tracking .ff-empty-state-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--surface-3);
        color: var(--primary);
        font-size: 22px;
        margin-bottom: 14px;
    }

    body.ff-app .ff-internal-tracking .ff-empty-state-title {
        margin: 0 0 6px;
        color: var(--text);
        font-weight: 700;
    }

    body.ff-app .ff-internal-tracking .ff-empty-state-copy {
        max-width: 560px;
        margin: 0;
        color: var(--text-muted);
    }

    body.ff-app .ff-internal-tracking .ff-visually-hidden {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }

@media (max-width: 991px) {
    body.ff-app .ff-internal-tracking .ff-summary-line {
        flex-direction: column;
        align-items: flex-start;
    }

    body.ff-app .ff-internal-tracking .ff-summary-line-value {
        text-align: left;
    }
}

@media (max-width: 767px) {
    body.ff-app .ff-internal-tracking .ff-card-header,
    body.ff-app .ff-internal-tracking .ff-card-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    body.ff-app .ff-internal-tracking .ff-timeline-head {
        display: none;
    }

    body.ff-app .ff-internal-tracking .ff-timeline-row {
        margin-left: 15px;
        padding: 12px 0;
    }

    body.ff-app .ff-internal-tracking .ff-timeline-cell {
        margin-bottom: 8px;
    }

    body.ff-app .ff-internal-tracking .ff-timeline-cell-label {
        display: inline-block;
    }

    body.ff-app .ff-internal-tracking .ff-detail-item {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

body.ff-app .ff-internal-tracking--refined {
    --ff-card-pad-x: 20px;
    --ff-card-pad-y: 16px;
    --ff-card-pad-tight-y: 14px;
    --ff-card-gap: 16px;
}

    body.ff-app .ff-internal-tracking--refined .container-fullw {
        background: transparent;
    }

    body.ff-app .ff-internal-tracking--refined .ff-card.panel {
        margin-bottom: var(--ff-card-gap);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-1);
        overflow: hidden;
    }

    body.ff-app .ff-internal-tracking--refined .ff-card-header {
        background: var(--surface-2);
        border-bottom: 1px solid var(--divider);
        padding: var(--ff-card-pad-y) var(--ff-card-pad-x);
    }

    body.ff-app .ff-internal-tracking--refined .ff-card-header--tight {
        padding-top: var(--ff-card-pad-tight-y);
        padding-bottom: var(--ff-card-pad-tight-y);
    }

    body.ff-app .ff-internal-tracking--refined .ff-card-body {
        padding: var(--ff-card-pad-y) var(--ff-card-pad-x);
        background: var(--surface);
    }

    body.ff-app .ff-internal-tracking--refined .ff-card-body--compact {
        padding-top: 14px;
        padding-bottom: 14px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-card-header-main {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-card-title {
        margin: 0;
        color: var(--text) !important;
        font-size: 18px;
        line-height: 1.25;
        font-weight: 700;
    }

    body.ff-app .ff-internal-tracking--refined .ff-card-title-inline {
        color: var(--text-muted);
        font-weight: 600;
        margin-left: 6px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-card-meta {
        margin: 0;
        color: var(--text-muted);
        font-size: 12px;
        line-height: 1.4;
    }

    body.ff-app .ff-internal-tracking--refined .ff-search-shell .ff-card-body {
        padding-top: 14px;
        padding-bottom: 12px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-search-row .form-group {
        margin-bottom: 12px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-search-row label {
        margin-bottom: 6px;
        color: var(--text);
        font-weight: 700;
        font-size: 12px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-search-submit-wrap {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 68px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-search-submit {
        width: 100%;
        min-height: 40px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-shipbar {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 4px;
        padding-top: 12px;
        border-top: 1px solid var(--divider);
    }

    body.ff-app .ff-internal-tracking--refined .ff-shipbar-item {
        min-width: 120px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 8px 10px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-shipbar-item--status {
        flex: 1 1 360px;
        background: color-mix(in srgb, var(--primary) 7%, var(--surface));
        border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
    }

    body.ff-app .ff-internal-tracking--refined .ff-shipbar-label {
        display: block;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin-bottom: 4px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-shipbar-value {
        display: block;
        color: var(--text);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.35;
        word-break: break-word;
    }

    body.ff-app .ff-internal-tracking--refined .ff-shipbar-inline-sep {
        color: var(--text-disabled);
        padding: 0 4px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-results-scroll {
        max-height: 240px;
        overflow-y: auto;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
    }

    body.ff-app .ff-internal-tracking--refined .ff-results-table {
        margin-bottom: 0;
        background: var(--surface);
    }

        body.ff-app .ff-internal-tracking--refined .ff-results-table thead th {
            background: var(--surface-3);
            color: var(--text) !important;
            border-bottom: 1px solid var(--border);
            font-weight: 700;
        }

        body.ff-app .ff-internal-tracking--refined .ff-results-table tbody tr:hover {
            background: var(--surface-2);
        }

    body.ff-app .ff-internal-tracking--refined .ff-results-actions {
        margin-top: 12px;
        text-align: right;
    }

    body.ff-app .ff-internal-tracking--refined .ff-tracking-tabs {
        margin-top: 2px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-tabs-modern > .nav-tabs {
        display: flex;
        border-bottom: 1px solid var(--border);
        background: var(--surface);
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        overflow: hidden;
    }

        body.ff-app .ff-internal-tracking--refined .ff-tabs-modern > .nav-tabs > li {
            margin-bottom: 0;
        }

            body.ff-app .ff-internal-tracking--refined .ff-tabs-modern > .nav-tabs > li > a {
                margin-right: 0;
                border: 0 !important;
                border-right: 1px solid var(--divider) !important;
                background: var(--surface);
                color: var(--text-muted);
                font-weight: 700;
                font-size: 12px;
                letter-spacing: 0.02em;
                padding: 13px 18px;
                text-transform: uppercase;
                transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
            }

            body.ff-app .ff-internal-tracking--refined .ff-tabs-modern > .nav-tabs > li:last-child > a {
                border-right: 0 !important;
            }

            body.ff-app .ff-internal-tracking--refined .ff-tabs-modern > .nav-tabs > li > a:hover,
            body.ff-app .ff-internal-tracking--refined .ff-tabs-modern > .nav-tabs > li > a:focus {
                background: var(--surface-2);
                color: var(--text);
            }

            body.ff-app .ff-internal-tracking--refined .ff-tabs-modern > .nav-tabs > li.active > a,
            body.ff-app .ff-internal-tracking--refined .ff-tabs-modern > .nav-tabs > li.active > a:hover,
            body.ff-app .ff-internal-tracking--refined .ff-tabs-modern > .nav-tabs > li.active > a:focus {
                background: color-mix(in srgb, var(--primary) 8%, var(--surface));
                color: var(--text);
                box-shadow: inset 0 -3px 0 var(--primary);
            }

    body.ff-app .ff-internal-tracking--refined .ff-tab-pane-wrap {
        padding-top: 14px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-main-layout {
        display: flex;
        flex-wrap: wrap;
    }

        body.ff-app .ff-internal-tracking--refined .ff-main-layout > [class*="col-"] {
            margin-bottom: 0;
        }

    body.ff-app .ff-internal-tracking--refined .ff-card--timeline {
        min-height: 100%;
    }

    body.ff-app .ff-internal-tracking--refined .ff-sidebar-stack {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-card--compact {
        box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    }

    body.ff-app .ff-internal-tracking--refined .ff-latest-event-banner {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 12px;
        margin-bottom: 14px;
        border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
        background: color-mix(in srgb, var(--primary) 7%, var(--surface));
        border-radius: var(--radius-sm);
    }

    body.ff-app .ff-internal-tracking--refined .ff-latest-event-badge {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 52px;
        padding: 4px 8px;
        border-radius: 999px;
        background: var(--primary);
        color: var(--on-primary);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    body.ff-app .ff-internal-tracking--refined .ff-latest-event-copy {
        display: flex;
        flex-direction: column;
        gap: 2px;
        color: var(--text);
        line-height: 1.4;
    }

    body.ff-app .ff-internal-tracking--refined .ff-latest-event-meta {
        color: var(--text-muted);
        font-size: 12px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-timeline-head {
        margin: 0 0 10px 15px;
        padding: 0 0 10px;
        border-bottom: 1px solid var(--divider);
    }

    body.ff-app .ff-internal-tracking--refined .ff-timeline-head-label {
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    body.ff-app .ff-internal-tracking--refined .ff-timeline-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    body.ff-app .ff-internal-tracking--refined .timeline-xs .timeline-item {
        border-left-color: var(--primary);
        padding-bottom: 12px;
    }

    body.ff-app .ff-internal-tracking--refined .shipmentheader.ff-timeline-date {
        display: inline-block;
        margin: 0 0 8px 15px !important;
        padding: 6px 10px !important;
        background: var(--surface-3) !important;
        color: var(--text) !important;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        font-weight: 700 !important;
    }

    body.ff-app .ff-internal-tracking--refined .ff-timeline-row {
        margin: 0 0 0 15px;
        padding: 11px 0;
        border-bottom: 1px solid var(--divider);
    }

    body.ff-app .ff-internal-tracking--refined .timeline-item .ff-timeline-row:last-child {
        border-bottom: 0;
    }

    body.ff-app .ff-internal-tracking--refined .ff-timeline-row--highlight {
        background: color-mix(in srgb, var(--primary) 4%, transparent);
        border-radius: 8px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-timeline-cell {
        min-height: 1px;
    }

        body.ff-app .ff-internal-tracking--refined .ff-timeline-cell p,
        body.ff-app .ff-internal-tracking--refined .ff-text,
        body.ff-app .ff-internal-tracking--refined .text-black {
            color: var(--text) !important;
            margin: 0;
        }

    body.ff-app .ff-internal-tracking--refined .ff-timeline-cell-label {
        display: none;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        margin-right: 6px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-action-link {
        color: var(--primary);
        font-weight: 600;
        line-height: 1.4;
    }

        body.ff-app .ff-internal-tracking--refined .ff-action-link:hover,
        body.ff-app .ff-internal-tracking--refined .ff-action-link:focus {
            color: var(--primary-hover);
            text-decoration: underline;
        }

    body.ff-app .ff-internal-tracking--refined .ff-notify-textarea {
        resize: vertical;
        min-height: 96px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-field-help {
        margin: 8px 0 0;
        color: var(--text-muted);
        font-size: 12px;
        line-height: 1.35;
    }

    body.ff-app .ff-internal-tracking--refined .ff-summary-stack {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    body.ff-app .ff-internal-tracking--refined .ff-summary-line {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 0;
        border-bottom: 1px solid var(--divider);
    }

        body.ff-app .ff-internal-tracking--refined .ff-summary-line:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        body.ff-app .ff-internal-tracking--refined .ff-summary-line:first-child {
            padding-top: 0;
        }

    body.ff-app .ff-internal-tracking--refined .ff-summary-line-label {
        color: var(--text-muted);
        font-weight: 600;
        min-width: 80px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-summary-line-value {
        color: var(--text);
        font-weight: 600;
        text-align: right;
        word-break: break-word;
    }

    body.ff-app .ff-internal-tracking--refined .ff-detail-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-detail-group {
        min-width: 0;
    }

    body.ff-app .ff-internal-tracking--refined .ff-detail-group-title {
        margin: 0 0 10px;
        color: var(--text);
        font-size: 14px;
        font-weight: 700;
    }

    body.ff-app .ff-internal-tracking--refined .ff-detail-list {
        margin: 0;
    }

    body.ff-app .ff-internal-tracking--refined .ff-detail-item {
        display: grid;
        grid-template-columns: 120px 1fr;
        gap: 10px;
        align-items: start;
        padding: 9px 0;
        border-bottom: 1px solid var(--divider);
    }

        body.ff-app .ff-internal-tracking--refined .ff-detail-item:last-child {
            border-bottom: 0;
        }

        body.ff-app .ff-internal-tracking--refined .ff-detail-item dt {
            margin: 0;
            color: var(--text-muted);
            font-weight: 700;
        }

        body.ff-app .ff-internal-tracking--refined .ff-detail-item dd {
            margin: 0;
            color: var(--text);
            font-weight: 500;
            word-break: break-word;
        }

    body.ff-app .ff-internal-tracking--refined .ff-images-pane {
        padding: 0;
        min-height: 75vh;
    }

    body.ff-app .ff-internal-tracking--refined .ff-images-frame {
        display: block;
        width: 100%;
        min-height: 75vh;
        border: 0;
        background: var(--surface);
    }

    body.ff-app .ff-internal-tracking--refined .ff-empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 250px;
        text-align: center;
    }

    body.ff-app .ff-internal-tracking--refined .ff-empty-state-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--surface-3);
        color: var(--primary);
        font-size: 22px;
        margin-bottom: 14px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-empty-state-title {
        margin: 0 0 6px;
        color: var(--text);
        font-weight: 700;
    }

    body.ff-app .ff-internal-tracking--refined .ff-empty-state-copy {
        max-width: 560px;
        margin: 0;
        color: var(--text-muted);
    }

    body.ff-app .ff-internal-tracking--refined .ff-visually-hidden {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }

@media (max-width: 1199px) {
    body.ff-app .ff-internal-tracking--refined .ff-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    body.ff-app .ff-internal-tracking--refined .ff-summary-line {
        flex-direction: column;
        align-items: flex-start;
    }

    body.ff-app .ff-internal-tracking--refined .ff-summary-line-value {
        text-align: left;
    }

    body.ff-app .ff-internal-tracking--refined .ff-detail-grid {
        grid-template-columns: 1fr;
    }

    body.ff-app .ff-internal-tracking--refined .ff-shipbar-item--status {
        flex-basis: 100%;
    }
}

@media (max-width: 767px) {
    body.ff-app .ff-internal-tracking--refined .ff-card-header,
    body.ff-app .ff-internal-tracking--refined .ff-card-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-tabs-modern > .nav-tabs > li > a {
        padding: 11px 12px;
        font-size: 11px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-timeline-head {
        display: none;
    }

    body.ff-app .ff-internal-tracking--refined .ff-timeline-row {
        margin-left: 15px;
        padding: 12px 0;
    }

    body.ff-app .ff-internal-tracking--refined .ff-timeline-cell {
        margin-bottom: 8px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-timeline-cell-label {
        display: inline-block;
    }

    body.ff-app .ff-internal-tracking--refined .ff-detail-item {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-latest-event-banner {
        flex-direction: column;
    }
}

body.ff-app .ff-internal-tracking--final {
    --ff-card-pad-x: 20px;
    --ff-card-pad-y: 16px;
    --ff-card-pad-tight-y: 14px;
    --ff-card-gap: 16px;
}

    body.ff-app .ff-internal-tracking--final .container-fullw {
        background: transparent;
    }

    body.ff-app .ff-internal-tracking--final .ff-card.panel {
        margin-bottom: var(--ff-card-gap);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-1);
        overflow: hidden;
    }

    body.ff-app .ff-internal-tracking--final .ff-card-header {
        background: var(--surface-2);
        border-bottom: 1px solid var(--divider);
        padding: var(--ff-card-pad-y) var(--ff-card-pad-x);
    }

    body.ff-app .ff-internal-tracking--final .ff-card-header--tight {
        padding-top: var(--ff-card-pad-tight-y);
        padding-bottom: var(--ff-card-pad-tight-y);
    }

    body.ff-app .ff-internal-tracking--final .ff-card-body {
        padding: var(--ff-card-pad-y) var(--ff-card-pad-x);
        background: var(--surface);
    }

    body.ff-app .ff-internal-tracking--final .ff-card-body--compact {
        padding-top: 14px;
        padding-bottom: 14px;
    }

    body.ff-app .ff-internal-tracking--final .ff-card-header-main {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    body.ff-app .ff-internal-tracking--final .ff-card-title {
        margin: 0;
        color: var(--text) !important;
        font-size: 18px;
        line-height: 1.25;
        font-weight: 700;
    }

    body.ff-app .ff-internal-tracking--final .ff-card-meta {
        margin: 0;
        color: var(--text-muted);
        font-size: 12px;
        line-height: 1.4;
    }

    body.ff-app .ff-internal-tracking--final .ff-search-shell .ff-card-body {
        padding-top: 14px;
        padding-bottom: 12px;
    }

    body.ff-app .ff-internal-tracking--final .ff-search-row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        margin-left: -8px;
        margin-right: -8px;
    }

        body.ff-app .ff-internal-tracking--final .ff-search-row > .ff-search-col {
            float: none;
            padding-left: 8px;
            padding-right: 8px;
        }

        body.ff-app .ff-internal-tracking--final .ff-search-row .form-group {
            margin-bottom: 12px;
        }

        body.ff-app .ff-internal-tracking--final .ff-search-row label {
            margin-bottom: 6px;
            color: var(--text);
            font-weight: 700;
            font-size: 12px;
        }

    body.ff-app .ff-internal-tracking--final .ff-search-submit-wrap {
        min-height: 0;
        margin-bottom: 12px;
        display: flex;
        align-items: flex-end;
    }

    body.ff-app .ff-internal-tracking--final .ff-search-submit {
        width: 100%;
        min-height: 30px;
    }

@media (min-width: 1200px) {
    body.ff-app .ff-internal-tracking--final .ff-search-col-main {
        width: 34%;
    }

    body.ff-app .ff-internal-tracking--final .ff-search-col-acc {
        width: 16%;
    }

    body.ff-app .ff-internal-tracking--final .ff-search-col-type {
        width: 16%;
    }

    body.ff-app .ff-internal-tracking--final .ff-search-col-action {
        width: 16%;
    }

    body.ff-app .ff-internal-tracking--final .ff-search-col-submit {
        width: 18%;
    }
}

@media (max-width: 767px) {
    body.ff-app .ff-internal-tracking--final .ff-search-row > .ff-search-col {
        width: 100%;
    }
}

    body.ff-app .ff-internal-tracking--final .ff-summary-strip {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 4px;
        padding-top: 12px;
        border-top: 1px solid var(--divider);
    }

    body.ff-app .ff-internal-tracking--final .ff-summary-strip-item {
        min-width: 130px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 8px 10px;
    }

    body.ff-app .ff-internal-tracking--final .ff-summary-strip-item--latest {
        flex: 1 1 360px;
        background: color-mix(in srgb, var(--primary) 7%, var(--surface));
        border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
    }

    body.ff-app .ff-internal-tracking--final .ff-summary-strip-label {
        display: block;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin-bottom: 4px;
    }

    body.ff-app .ff-internal-tracking--final .ff-summary-strip-value {
        display: block;
        color: var(--text);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.35;
        word-break: break-word;
    }

    body.ff-app .ff-internal-tracking--final .ff-summary-strip-sep {
        color: var(--text-disabled);
        padding: 0 4px;
    }

    body.ff-app .ff-internal-tracking--final .ff-results-scroll {
        max-height: 240px;
        overflow-y: auto;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
    }

    body.ff-app .ff-internal-tracking--final .ff-results-table {
        margin-bottom: 0;
        background: var(--surface);
    }

        body.ff-app .ff-internal-tracking--final .ff-results-table thead th {
            background: var(--surface-3);
            color: var(--text) !important;
            border-bottom: 1px solid var(--border);
            font-weight: 700;
        }

        body.ff-app .ff-internal-tracking--final .ff-results-table tbody tr:hover {
            background: var(--surface-2);
        }

    body.ff-app .ff-internal-tracking--final .ff-results-actions {
        margin-top: 12px;
        text-align: right;
    }

    body.ff-app .ff-internal-tracking--final .ff-tracking-tabs {
        margin-top: 4px;
    }

    body.ff-app .ff-internal-tracking--final .ff-tabs-clean > .nav-tabs {
        margin: 0 0 14px;
        border-bottom: 0;
        background: transparent;
    }

        body.ff-app .ff-internal-tracking--final .ff-tabs-clean > .nav-tabs.nav-justified {
            width: 100%;
        }

            body.ff-app .ff-internal-tracking--final .ff-tabs-clean > .nav-tabs.nav-justified > li {
                float: none;
            }

        body.ff-app .ff-internal-tracking--final .ff-tabs-clean > .nav-tabs > li > a {
            margin-right: 0;
            border: 1px solid var(--border) !important;
            border-bottom-color: var(--border) !important;
            background: var(--surface);
            color: var(--text-muted);
            font-weight: 700;
            font-size: 12px;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            padding: 13px 18px;
            transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
        }

        body.ff-app .ff-internal-tracking--final .ff-tabs-clean > .nav-tabs.nav-justified > li:not(:first-child) > a {
            border-left-width: 0 !important;
        }

        body.ff-app .ff-internal-tracking--final .ff-tabs-clean > .nav-tabs.nav-justified > li:first-child > a {
            border-top-left-radius: var(--radius-md);
            border-bottom-left-radius: var(--radius-md);
        }

        body.ff-app .ff-internal-tracking--final .ff-tabs-clean > .nav-tabs.nav-justified > li:last-child > a {
            border-top-right-radius: var(--radius-md);
            border-bottom-right-radius: var(--radius-md);
        }

        body.ff-app .ff-internal-tracking--final .ff-tabs-clean > .nav-tabs > li > a:hover,
        body.ff-app .ff-internal-tracking--final .ff-tabs-clean > .nav-tabs > li > a:focus {
            background: var(--surface-2);
            color: var(--text);
        }

        body.ff-app .ff-internal-tracking--final .ff-tabs-clean > .nav-tabs > li.active > a,
        body.ff-app .ff-internal-tracking--final .ff-tabs-clean > .nav-tabs > li.active > a:hover,
        body.ff-app .ff-internal-tracking--final .ff-tabs-clean > .nav-tabs > li.active > a:focus {
            background: color-mix(in srgb, var(--primary) 8%, var(--surface));
            color: var(--text);
            border-color: var(--border) !important;
            box-shadow: none;
        }

    body.ff-app .ff-internal-tracking--final .ff-tab-pane-wrap {
        padding-top: 0;
    }

    body.ff-app .ff-internal-tracking--final .ff-sidebar-stack {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    body.ff-app .ff-internal-tracking--final .ff-card--compact {
        box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    }

    body.ff-app .ff-internal-tracking--final .ff-latest-event-banner {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 12px;
        margin-bottom: 14px;
        border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
        background: color-mix(in srgb, var(--primary) 7%, var(--surface));
        border-radius: var(--radius-sm);
    }

    body.ff-app .ff-internal-tracking--final .ff-latest-event-badge {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 52px;
        padding: 4px 8px;
        border-radius: 999px;
        background: var(--primary);
        color: var(--on-primary);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    body.ff-app .ff-internal-tracking--final .ff-latest-event-copy {
        display: flex;
        flex-direction: column;
        gap: 2px;
        color: var(--text);
        line-height: 1.4;
    }

    body.ff-app .ff-internal-tracking--final .ff-latest-event-meta {
        color: var(--text-muted);
        font-size: 12px;
    }

    body.ff-app .ff-internal-tracking--final .ff-timeline-head {
        margin: 0 0 10px 15px;
        padding: 0 0 10px;
        border-bottom: 1px solid var(--divider);
    }

    body.ff-app .ff-internal-tracking--final .ff-timeline-head-label {
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    body.ff-app .ff-internal-tracking--final .ff-timeline-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    body.ff-app .ff-internal-tracking--final .timeline-xs .timeline-item {
        border-left-color: var(--primary);
        padding-bottom: 12px;
    }

    body.ff-app .ff-internal-tracking--final .shipmentheader.ff-timeline-date {
        display: inline-block;
        margin: 0 0 8px 15px !important;
        padding: 6px 10px !important;
        background: var(--surface-3) !important;
        color: var(--text) !important;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        font-weight: 700 !important;
    }

    body.ff-app .ff-internal-tracking--final .ff-timeline-row {
        margin: 0 0 0 15px;
        padding: 11px 0;
        border-bottom: 1px solid var(--divider);
    }

    body.ff-app .ff-internal-tracking--final .timeline-item .ff-timeline-row:last-child {
        border-bottom: 0;
    }

    body.ff-app .ff-internal-tracking--final .ff-timeline-row--highlight {
        background: color-mix(in srgb, var(--primary) 4%, transparent);
        border-radius: 8px;
    }

    body.ff-app .ff-internal-tracking--final .ff-timeline-cell p,
    body.ff-app .ff-internal-tracking--final .ff-text,
    body.ff-app .ff-internal-tracking--final .text-black {
        color: var(--text) !important;
        margin: 0;
    }

    body.ff-app .ff-internal-tracking--final .ff-timeline-cell-label {
        display: none;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        margin-right: 6px;
    }

    body.ff-app .ff-internal-tracking--final .ff-action-link {
        color: var(--primary);
        font-weight: 600;
        line-height: 1.4;
    }

        body.ff-app .ff-internal-tracking--final .ff-action-link:hover,
        body.ff-app .ff-internal-tracking--final .ff-action-link:focus {
            color: var(--primary-hover);
            text-decoration: underline;
        }

    body.ff-app .ff-internal-tracking--final .ff-notify-textarea {
        resize: vertical;
        min-height: 96px;
    }

    body.ff-app .ff-internal-tracking--final .ff-field-help {
        margin: 8px 0 0;
        color: var(--text-muted);
        font-size: 12px;
        line-height: 1.35;
    }

    body.ff-app .ff-internal-tracking--final .ff-detail-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
    }

    body.ff-app .ff-internal-tracking--final .ff-detail-group {
        min-width: 0;
    }

    body.ff-app .ff-internal-tracking--final .ff-detail-group-title {
        margin: 0 0 10px;
        color: var(--text);
        font-size: 14px;
        font-weight: 700;
    }

    body.ff-app .ff-internal-tracking--final .ff-detail-list {
        margin: 0;
    }

    body.ff-app .ff-internal-tracking--final .ff-detail-item {
        display: grid;
        grid-template-columns: 120px 1fr;
        gap: 10px;
        align-items: start;
        padding: 9px 0;
        border-bottom: 1px solid var(--divider);
    }

        body.ff-app .ff-internal-tracking--final .ff-detail-item:last-child {
            border-bottom: 0;
        }

        body.ff-app .ff-internal-tracking--final .ff-detail-item dt {
            margin: 0;
            color: var(--text-muted);
            font-weight: 700;
        }

        body.ff-app .ff-internal-tracking--final .ff-detail-item dd {
            margin: 0;
            color: var(--text);
            font-weight: 500;
            word-break: break-word;
        }

    body.ff-app .ff-internal-tracking--final .ff-images-pane {
        padding: 0;
        min-height: 75vh;
    }

    body.ff-app .ff-internal-tracking--final .ff-images-frame {
        display: block;
        width: 100%;
        min-height: 75vh;
        border: 0;
        background: var(--surface);
    }

    body.ff-app .ff-internal-tracking--final .ff-empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 250px;
        text-align: center;
    }

    body.ff-app .ff-internal-tracking--final .ff-empty-state-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--surface-3);
        color: var(--primary);
        font-size: 22px;
        margin-bottom: 14px;
    }

    body.ff-app .ff-internal-tracking--final .ff-empty-state-title {
        margin: 0 0 6px;
        color: var(--text);
        font-weight: 700;
    }

    body.ff-app .ff-internal-tracking--final .ff-empty-state-copy {
        max-width: 560px;
        margin: 0;
        color: var(--text-muted);
    }

    body.ff-app .ff-internal-tracking--final .ff-visually-hidden {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }

@media (max-width: 991px) {
    body.ff-app .ff-internal-tracking--final .ff-summary-strip-item--latest {
        flex-basis: 100%;
    }
}

@media (max-width: 767px) {
    body.ff-app .ff-internal-tracking--final .ff-card-header,
    body.ff-app .ff-internal-tracking--final .ff-card-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    body.ff-app .ff-internal-tracking--final .ff-tabs-clean > .nav-tabs > li > a {
        padding: 11px 10px;
        font-size: 11px;
    }

    body.ff-app .ff-internal-tracking--final .ff-timeline-head {
        display: none;
    }

    body.ff-app .ff-internal-tracking--final .ff-timeline-row {
        margin-left: 15px;
        padding: 12px 0;
    }

    body.ff-app .ff-internal-tracking--final .ff-timeline-cell {
        margin-bottom: 8px;
    }

    body.ff-app .ff-internal-tracking--final .ff-timeline-cell-label {
        display: inline-block;
    }

    body.ff-app .ff-internal-tracking--final .ff-detail-item {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    body.ff-app .ff-internal-tracking--final .ff-latest-event-banner {
        flex-direction: column;
    }
}

.acc-field-col,
.ff-acc-col {
    min-width: 10rem;
}

.acc-field,
.ff-acc-input,
body.ff-app input[name="AcctNo"],
body.ff-app input[name="accNo"],
body.ff-app input[name="AccNo"],
body.ff-app input[name="SAcctNumber"],
body.ff-app input[name="RAcctNumber"],
body.ff-app input[id="accClient"],
body.ff-app input[id="SAccNo"],
body.ff-app input[id="RAccNo"] {
    min-width: 12ch;
    width: 100%;
    font-family: Consolas, "Courier New", monospace !important;
    letter-spacing: 0.02em;
}

/* Portal-wide compact field spacing.
   styles.css still leaks a login-era input[type="text"]/input[type="password"]
   rule into the app shell, adding oversized horizontal padding and bold text.
   Tighten the common case here, then preserve extra inset only where icons
   or date affordances genuinely need it. */
body.ff-app input[type="text"]:not(.search-select),
body.ff-app input[type="password"],
body.ff-app input[type="number"],
body.ff-app input[type="email"],
body.ff-app input[type="search"],
body.ff-app input[type="tel"],
body.ff-app input[type="url"],
body.ff-app select.form-control,
body.ff-app textarea.form-control,
body.ff-app .ff-input:not(.search-select) {
    padding: 5px 10px !important;
    font-weight: 400 !important;
}

body.ff-app .ui-select-container .btn.form-control.ui-select-toggle,
body.ff-app .ui-select-container .btn.form-control,
body.ff-app .ff-ui.ui-select-bootstrap .ui-select-search {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-weight: 400 !important;
}

body.ff-app .ff-ui.ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-ui.ui-select-bootstrap .ui-select-match-text span,
body.ff-app .ff-ui.ui-select-bootstrap .ui-select-placeholder {
    line-height: 1.35 !important;
}

/* View Waybills filter fields must stay compact and top-aligned even after
   the generic waybill/ui-select rules later in this file are applied. */
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid {
    align-items: start;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-field,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-field,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row > .ff-filter-field {
    align-self: flex-start;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row label [json-dbl],
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row label [json-dbl],
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid label [json-dbl] {
    display: inline-block;
    float: right;
    line-height: 16px;
    max-width: 58%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .form-control,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .form-control,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .form-control,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .ff-control,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .ff-control,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ff-control,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-container,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-container,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-container,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap .ui-select-match,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap .ui-select-match,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-match,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap .ui-select-match.ng-scope,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap .ui-select-match.ng-scope,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-match.ng-scope,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap .ui-select-match.btn-default-focus,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap .ui-select-match.btn-default-focus,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-match.btn-default-focus,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .dx-texteditor,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .dx-texteditor,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .dx-texteditor,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .dx-widget,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .dx-widget,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .dx-widget {
    box-sizing: border-box;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row textarea.form-control,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row textarea.form-control,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid textarea.form-control {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    overflow-y: auto;
    resize: none;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap > .ui-select-match > .btn {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: var(--ff-control-h) !important;
    line-height: 1.2 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap .ui-select-search,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap .ui-select-search,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-search {
    box-sizing: border-box;
    height: var(--ff-control-h) !important;
    line-height: 1.2 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap .ui-select-match-text span,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap .ui-select-placeholder,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap .ui-select-match-text span,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap .ui-select-placeholder,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-match-text span,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-placeholder {
    line-height: 1.2 !important;
    max-height: calc(var(--ff-control-h) - 4px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .dx-texteditor-container,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .dx-texteditor-container,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .dx-texteditor-container,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .dx-texteditor-input,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .dx-texteditor-input,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .dx-texteditor-input,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .dx-dropdowneditor-input-wrapper,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .dx-dropdowneditor-input-wrapper,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .dx-dropdowneditor-input-wrapper,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .dx-texteditor-buttons-container,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .dx-texteditor-buttons-container,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .dx-texteditor-buttons-container,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .dx-dropdowneditor-button,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .dx-dropdowneditor-button,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .dx-dropdowneditor-button {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app span.input-icon > input.form-control,
body.ff-app span.input-help > input.form-control {
    padding-left: 28px !important;
    padding-right: 8px !important;
}

body.ff-app .input-icon.input-icon-right > input.form-control {
    padding-left: 8px !important;
    padding-right: 28px !important;
}

body.ff-app .ff-date-icon > input.form-control {
    padding-left: 36px !important;
    padding-right: 10px !important;
}

/* Surcharges form alignment */
body.ff-app .ff-surcharges .container-fullw {
    padding-top: 8px !important;
}

body.ff-app .ff-surcharges fieldset {
    max-width: 1220px;
    padding-top: 6px !important;
    padding-bottom: 8px !important;
}

body.ff-app .ff-surcharges .ff-surcharges-form {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

body.ff-app .ff-surcharges .ff-surcharges-row,
body.ff-app .ff-surcharges .ff-surcharges-grid {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

body.ff-app .ff-surcharges .ff-surcharges-select-row,
body.ff-app .ff-surcharges .ff-surcharges-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    column-gap: 10px;
    row-gap: 4px;
}

body.ff-app .ff-surcharges .ff-surcharges-field-select,
body.ff-app .ff-surcharges .ff-surcharges-field-name {
    flex: 0 1 430px;
    max-width: 430px;
    min-width: 260px;
}

body.ff-app .ff-surcharges .ff-surcharges-field-code {
    flex: 0 0 78px;
    max-width: 78px;
}

body.ff-app .ff-surcharges .ff-surcharges-field-short-name {
    flex: 0 1 160px;
    max-width: 170px;
    min-width: 130px;
}

body.ff-app .ff-surcharges .ff-surcharges-field-first-kgs,
body.ff-app .ff-surcharges .ff-surcharges-field-charge,
body.ff-app .ff-surcharges .ff-surcharges-field-percent {
    flex: 0 1 122px;
    max-width: 138px;
    min-width: 104px;
}

body.ff-app .ff-surcharges .ff-surcharges-field-priority {
    flex: 0 0 44px;
    max-width: 44px;
    min-width: 44px;
}

body.ff-app .ff-surcharges .ff-surcharges-row > [class*="col-"],
body.ff-app .ff-surcharges .ff-surcharges-grid > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-surcharges .form-group {
    margin-bottom: 0;
}

body.ff-app .ff-surcharges .form-group > label {
    display: flex;
    align-items: flex-end;
    min-height: 16px;
    margin-bottom: 2px;
    line-height: 1.1;
    white-space: nowrap;
}

body.ff-app .ff-surcharges .form-control,
body.ff-app .ff-surcharges .input-group,
body.ff-app .ff-surcharges .ff-ui {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body.ff-app .ff-surcharges .input-group .form-control {
    min-width: 0;
}

body.ff-app .ff-surcharges .input-group-addon {
    width: 34px;
    padding-left: 8px;
    padding-right: 8px;
}

body.ff-app .ff-surcharges .ff-ui.ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn,
body.ff-app .ff-surcharges .ff-ui.ui-select-bootstrap > .ui-select-match > .btn {
    height: auto !important;
    min-height: var(--ff-control-h) !important;
    align-items: center !important;
    line-height: 1.35 !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

body.ff-app .ff-surcharges .ff-ui.ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-surcharges .ff-ui.ui-select-bootstrap .ui-select-match-text span {
    line-height: 1.35 !important;
    overflow: visible !important;
}

body.ff-app .ff-surcharges .ff-surcharges-check-field {
    min-height: calc(18px + var(--ff-control-h));
    display: flex;
    align-items: center;
    padding-top: 18px;
}

body.ff-app .ff-surcharges .ff-surcharges-dormant-field {
    flex: 0 0 auto;
    justify-content: center;
    min-width: 86px;
}

body.ff-app .ff-surcharges .ff-surcharges-check-field .checkbox {
    margin: 0;
}

body.ff-app .ff-surcharges .ff-surcharges-check-field .clip-check label {
    line-height: 22px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-surcharges .bootstrap-touchspin.input-group,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-surcharges .input-group.bootstrap-touchspin,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-surcharges .input-group.bootstrap-touchspin .form-control,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-surcharges .input-group.bootstrap-touchspin .input-group-addon {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-surcharges .input-group.bootstrap-touchspin .form-control,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-surcharges .input-group.bootstrap-touchspin .input-group-addon {
    line-height: calc(var(--ff-control-h) - 2px) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    vertical-align: top !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-surcharges .ff-surcharges-check-field {
    min-height: calc(13px + var(--ff-control-h)) !important;
    padding-top: 13px !important;
}

@media (max-width: 900px) {
    body.ff-app .ff-surcharges .ff-surcharges-check-field {
        min-height: auto;
        padding-top: 0;
    }
}

/* Escalations form alignment */
body.ff-app .ff-escalation fieldset {
    padding-bottom: 8px !important;
}

body.ff-app .ff-escalation .container-fullw {
    padding-top: 8px !important;
}

body.ff-app .ff-escalation .ff-escalation-form-fieldset {
    margin-bottom: 2px !important;
    padding-top: 8px !important;
}

body.ff-app .ff-escalation .ff-escalation-grid {
    display: grid;
    column-gap: 14px;
    row-gap: 6px;
    align-items: start;
    max-width: 100%;
}

body.ff-app .ff-escalation .ff-escalation-category-row {
    margin-bottom: 4px !important;
}

body.ff-app .ff-escalation .ff-escalation-category-options {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 26px;
    padding-left: 12px;
}

body.ff-app .ff-escalation .ff-escalation-category-options .radio {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    min-height: 24px;
}

body.ff-app .ff-escalation .ff-escalation-category-options .clip-radio label {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    min-height: 24px;
    line-height: 22px;
    padding-left: 30px !important;
}

body.ff-app .ff-escalation .ff-escalation-category-options .clip-radio label:before,
body.ff-app .ff-escalation .ff-escalation-category-options .clip-radio label:after {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

body.ff-app .ff-escalation .ff-escalation-grid-main {
    grid-template-columns:
        minmax(180px, 220px)
        minmax(180px, 240px)
        minmax(180px, 240px)
        minmax(420px, 2fr)
        minmax(150px, 180px)
        minmax(180px, 240px)
        minmax(180px, 240px);
}

body.ff-app .ff-escalation .ff-escalation-grid-options {
    grid-template-columns: minmax(145px, 165px) minmax(95px, 115px) auto auto auto;
    column-gap: 14px;
    justify-content: start;
    margin-top: 6px;
    align-items: start;
}

body.ff-app .ff-escalation .form-group {
    margin-bottom: 0 !important;
}

body.ff-app .ff-escalation .ff-escalation-field,
body.ff-app .ff-escalation .ff-escalation-field > .form-group,
body.ff-app .ff-escalation .multiselect-group,
body.ff-app .ff-escalation .ff-ms,
body.ff-app .ff-escalation .multiselect-parent,
body.ff-app .ff-escalation .multiselect-parent > div {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

body.ff-app .ff-escalation .ff-escalation-field-rates,
body.ff-app .ff-escalation .ff-escalation-field-value,
body.ff-app .ff-escalation .ff-escalation-field-rates > .form-group,
body.ff-app .ff-escalation .ff-escalation-field-value > .form-group {
    align-self: start;
    margin-top: 0 !important;
}

body.ff-app .ff-escalation .form-group > label,
body.ff-app .ff-escalation .ff-escalation-field > .form-group > label,
body.ff-app .ff-escalation .ff-escalation-field-acc label {
    display: block;
    line-height: 18px;
    min-height: 16px;
    margin-bottom: 3px;
    white-space: nowrap;
}

body.ff-app .ff-escalation .form-group > label:has(.symbol.required),
body.ff-app .ff-escalation .ff-escalation-field > .form-group > label:has(.symbol.required) {
    display: flex;
    align-items: center;
    gap: 2px;
}

body.ff-app .ff-escalation .symbol.required,
body.ff-app .ff-escalation .symbol.required:before {
    display: inline-block !important;
    height: auto !important;
    line-height: 1 !important;
    margin: 0 !important;
    vertical-align: baseline !important;
}

body.ff-app .ff-escalation .form-group > label .symbol.required:before,
body.ff-app .ff-escalation .ff-escalation-field > .form-group > label .symbol.required:before {
    font-size: 12px;
}

body.ff-app .ff-escalation .form-control,
body.ff-app .ff-escalation .input-group,
body.ff-app .ff-escalation .multiselect-group .dropdown-toggle,
body.ff-app .ff-escalation .ff-ms .dropdown-toggle {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body.ff-app .ff-escalation select.form-control {
    height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    line-height: 1.35 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

body.ff-app .ff-escalation textarea.form-control {
    height: var(--ff-control-h);
    min-height: var(--ff-control-h);
    resize: vertical;
}

body.ff-app .ff-escalation .input-group-btn > .btn {
    height: var(--ff-control-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.ff-app .ff-escalation .multiselect-group .dropdown-toggle,
body.ff-app .ff-escalation .ff-ms .dropdown-toggle {
    min-height: var(--ff-control-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ff-app .ff-escalation .multiselect-group .dropdown-toggle .caret,
body.ff-app .ff-escalation .ff-ms .dropdown-toggle .caret {
    flex: 0 0 auto;
    margin-left: 8px;
}

body.ff-app .ff-escalation .multiselect-group .dropdown-menu,
body.ff-app .ff-escalation .ff-ms .dropdown-menu {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

body.ff-app .ff-escalation .multiselect-group .dropdown-menu label,
body.ff-app .ff-escalation .ff-ms .dropdown-menu label {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

body.ff-app .ff-escalation .ff-escalation-check-field {
    min-height: 0;
    display: flex;
    align-items: center;
    padding-top: 19px;
}

body.ff-app .ff-escalation .ff-escalation-check-field .checkbox {
    align-items: center;
    display: inline-flex;
    margin: 0 !important;
    min-height: var(--ff-control-h);
}

body.ff-app .ff-escalation .ff-escalation-check-field .clip-check label {
    display: inline-flex;
    align-items: center;
    min-height: var(--ff-control-h);
    line-height: var(--ff-control-h);
    margin-bottom: 0;
    white-space: nowrap;
}

body.ff-app .ff-escalation .ff-escalation-action-row {
    margin-bottom: 2px !important;
    margin-top: 2px !important;
}

@media (max-width: 1700px) {
    body.ff-app .ff-escalation .ff-escalation-grid-main {
        grid-template-columns:
            minmax(180px, 220px)
            minmax(180px, 240px)
            minmax(180px, 240px)
            minmax(360px, 2fr);
    }

    body.ff-app .ff-escalation .ff-escalation-grid-options {
        grid-template-columns: minmax(145px, 165px) minmax(95px, 115px) repeat(3, auto);
        column-gap: 14px;
        justify-content: start;
    }
}

@media (max-width: 1280px) {
    body.ff-app .ff-escalation .ff-escalation-grid-main {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.ff-app .ff-escalation .ff-escalation-field-party {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991px) {
    body.ff-app .ff-escalation .ff-escalation-grid-main,
    body.ff-app .ff-escalation .ff-escalation-grid-options {
        grid-template-columns: 1fr;
    }

    body.ff-app .ff-escalation .ff-escalation-field-party {
        grid-column: auto;
    }

    body.ff-app .ff-escalation .ff-escalation-check-field {
        min-height: auto;
        align-items: center;
        padding-top: 0;
    }
}

/* Make the full left-navigation row clickable, not only the text/icon content. */
body.ff-app #sidebar nav > ul.main-navigation-menu > li > a {
    display: block !important;
    width: 100% !important;
    min-height: 44px;
    box-sizing: border-box;
    cursor: pointer;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li > a .item-content {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 44px;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li > a .item-inner {
    flex: 1 1 auto;
    width: auto !important;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

body.ff-app #sidebar nav ul.sub-menu > li > a,
body.ff-app .app-aside > ul.sub-menu > li > a {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    min-height: 36px;
    box-sizing: border-box;
    cursor: pointer;
}

body.ff-app #sidebar nav ul.sub-menu > li > a .title,
body.ff-app .app-aside > ul.sub-menu > li > a .title {
    display: block;
    width: 100%;
}

/* Consolidation filters: one responsive field flow plus a standard bottom action row. */
body.ff-app .ff-consolidation .ff-cons-filter-grid {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0 0 6px;
}

body.ff-app .ff-consolidation .ff-cons-filter-grid::before,
body.ff-app .ff-consolidation .ff-cons-filter-grid::after,
body.ff-app .ff-consolidation .ff-cons-filter-actions-row::before,
body.ff-app .ff-consolidation .ff-cons-filter-actions-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-consolidation .ff-cons-filter-grid > [class*="col-"],
body.ff-app .ff-consolidation .ff-cons-filter-actions-row > [class*="col-"] {
    float: none;
    max-width: 100%;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-consolidation .ff-cons-field .form-group {
    margin-bottom: 0;
}

body.ff-app .ff-consolidation .ff-cons-field .ff-control,
body.ff-app .ff-consolidation .ff-cons-field .form-control,
body.ff-app .ff-consolidation .ff-cons-field textarea.autoExpand {
    max-width: 100%;
    width: 100%;
}

body.ff-app .ff-consolidation .ff-cons-date-period {
    flex: 0 0 164px;
    max-width: 164px;
    min-width: 150px;
}

body.ff-app .ff-consolidation .ff-cons-date-period .ff-date-period-group {
    max-width: 164px;
    width: 164px;
}

body.ff-app .ff-consolidation .ff-date-period-select {
    -webkit-appearance: menulist !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
    padding-right: 24px !important;
}

body.ff-app .ff-consolidation .ff-cons-date-range {
    flex: 0 0 248px;
    max-width: 248px;
    min-width: 248px;
}

body.ff-app .ff-consolidation .ff-cons-date-range .range-picker {
    display: flex;
    max-width: 248px;
    min-width: 0;
    width: 100%;
}

body.ff-app .ff-consolidation .ff-cons-date-range .range-picker .start-date,
body.ff-app .ff-consolidation .ff-cons-date-range .range-picker .end-date {
    flex: 0 1 112px;
    max-width: 112px;
    min-width: 0;
}

body.ff-app .ff-consolidation .ff-cons-query,
body.ff-app .ff-consolidation .ff-cons-service {
    flex: 0 1 190px;
    max-width: 230px;
    min-width: 160px;
}

body.ff-app .ff-consolidation .ff-cons-client {
    flex: 1 1 310px;
    max-width: 470px;
    min-width: 260px;
}

body.ff-app .ff-consolidation .ff-cons-origin,
body.ff-app .ff-consolidation .ff-cons-destination {
    flex: 1 1 220px;
    max-width: 300px;
    min-width: 190px;
}

body.ff-app .ff-consolidation .ff-cons-small-list {
    flex: 0 0 118px;
    max-width: 128px;
    min-width: 105px;
}

body.ff-app .ff-consolidation .ff-cons-small-list textarea.autoExpand {
    height: var(--ff-control-h);
    max-height: var(--ff-control-h);
    min-height: var(--ff-control-h);
    resize: vertical;
}

body.ff-app .ff-consolidation .ff-cons-filter-actions-row {
    margin: 0;
}

body.ff-app .ff-consolidation .ff-cons-actions-field {
    flex: 1 1 100%;
}

body.ff-app .ff-consolidation .ff-cons-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    justify-content: flex-end;
    min-height: var(--ff-control-h);
    width: 100%;
}

body.ff-app .ff-consolidation .ff-cons-actions .btn,
body.ff-app .ff-consolidation .ff-cons-actions .checkbox {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-consolidation .ff-cons-actions .btn-wide {
    min-width: 0;
    width: auto;
}

body.ff-app .ff-consolidation .ff-cons-actions .ff-cons-preview {
    margin-right: auto !important;
}

body.ff-app .ff-consolidation .ff-cons-actions .ff-cons-keep-filter {
    margin-left: auto !important;
}

body.ff-app .ff-consolidation .ff-cons-actions .ff-cons-close-filter {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 var(--ff-control-h) !important;
    justify-content: center !important;
    min-width: var(--ff-control-h) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: var(--ff-control-h) !important;
}

body.ff-app .ff-consolidation .ff-cons-actions .checkbox label {
    line-height: var(--ff-control-h);
    margin-bottom: 0;
    min-height: var(--ff-control-h);
    padding-top: 0;
    white-space: nowrap;
}

body.ff-app .ff-consolidation .ff-cons-search-btn {
    order: 20;
}

body.ff-app .ff-consolidation .ff-cons-consolidate-btn {
    margin-left: 0;
}

body.ff-app .ff-consolidation .ff-cons-grid-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-bottom: 8px;
}

body.ff-app .ff-consolidation .ff-cons-grid-counts,
body.ff-app .ff-consolidation .ff-cons-grid-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

body.ff-app .ff-consolidation .ff-cons-grid-options {
    justify-content: flex-end;
    margin-left: auto;
}

body.ff-app .ff-consolidation .ff-cons-grid-options .checkbox-inline {
    margin-left: 0;
    padding-top: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-consolidation .ff-cons-date-period {
    flex-basis: 142px;
    max-width: 142px;
    min-width: 142px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-consolidation .ff-cons-date-period .ff-date-period-group {
    max-width: 142px;
    width: 142px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-consolidation .ff-cons-date-range {
    flex-basis: 232px;
    max-width: 232px;
    min-width: 232px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-consolidation .ff-cons-date-range .range-picker {
    max-width: 232px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-consolidation .ff-cons-date-range .range-picker .start-date,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-consolidation .ff-cons-date-range .range-picker .end-date {
    flex-basis: 104px;
    max-width: 104px;
}

@media (max-width: 560px) {
    body.ff-app .ff-consolidation .ff-cons-date-period,
    body.ff-app .ff-consolidation .ff-cons-date-range,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-consolidation .ff-cons-date-period,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-consolidation .ff-cons-date-range {
        flex-basis: 100%;
        max-width: none;
        min-width: 0;
        width: 100%;
    }

    body.ff-app .ff-consolidation .ff-cons-date-period .ff-date-period-group,
    body.ff-app .ff-consolidation .ff-cons-date-range .range-picker,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-consolidation .ff-cons-date-period .ff-date-period-group,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-consolidation .ff-cons-date-range .range-picker {
        max-width: none;
        width: 100%;
    }
}

/* Compact density should shrink the full page chrome, not only the grid. */
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) {
    --ff-control-h: 24px;
    font-size: var(--ff-page-font-size, 11px) !important;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) fieldset {
    padding: 4px 8px 6px !important;
    margin-bottom: 5px !important;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) fieldset > legend {
    font-size: 11px !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
    padding: 2px 6px !important;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .row,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .panel-body,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .panel-body .form-group {
    margin-bottom: 2px !important;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .form-group {
    margin-bottom: 1px !important;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .form-group > label,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .control-label,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-flow-row label,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-inline-row label,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-waybill-filter-grid label {
    font-size: var(--ff-control-font-size, 11px) !important;
    line-height: 12px !important;
    margin-bottom: 1px !important;
    min-height: 12px !important;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) input.form-control,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) select.form-control,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-input,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-control {
    font-size: var(--ff-control-font-size, 11px) !important;
    height: var(--ff-control-h) !important;
    line-height: 1.2 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-panel textarea.form-control,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-flow-row textarea.form-control,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-inline-row textarea.form-control,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-waybill-filter-grid textarea.form-control,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) fieldset:has(input[ng-model="filtermodel.KeepFilterOpen"]) textarea.form-control {
    font-size: var(--ff-control-font-size, 11px) !important;
    height: var(--ff-control-h) !important;
    line-height: 1.2 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-bootstrap,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-match,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-match.ng-scope,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-match.btn-default-focus {
    box-sizing: border-box;
    font-size: var(--ff-control-font-size, 11px) !important;
    height: var(--ff-control-h) !important;
    line-height: 1.2 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-container .btn.form-control.ui-select-toggle,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-container .btn.form-control,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-bootstrap > .ui-select-match > .btn {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    font-size: var(--ff-control-font-size, 11px) !important;
    height: var(--ff-control-h) !important;
    line-height: 1.2 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-search,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-container .ui-select-search {
    font-size: var(--ff-control-font-size, 11px) !important;
    height: calc(var(--ff-control-h) - 2px) !important;
    line-height: 1.2 !important;
    max-height: calc(var(--ff-control-h) - 2px) !important;
    min-height: calc(var(--ff-control-h) - 2px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-match-text,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-match-text span,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-placeholder {
    font-size: var(--ff-control-font-size, 11px) !important;
    line-height: 1.2 !important;
    max-height: calc(var(--ff-control-h) - 4px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-panel .dx-texteditor,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .form-group > .dx-texteditor,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-flow-row .dx-texteditor,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-inline-row .dx-texteditor,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-waybill-filter-grid .dx-texteditor {
    font-size: var(--ff-control-font-size, 11px) !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-panel .dx-texteditor-container,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .form-group > .dx-texteditor .dx-texteditor-container,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-flow-row .dx-texteditor-container,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-inline-row .dx-texteditor-container,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-waybill-filter-grid .dx-texteditor-container,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-panel .dx-texteditor-input,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .form-group > .dx-texteditor .dx-texteditor-input,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-flow-row .dx-texteditor-input,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-inline-row .dx-texteditor-input,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-waybill-filter-grid .dx-texteditor-input {
    font-size: var(--ff-control-font-size, 11px) !important;
    height: calc(var(--ff-control-h) - 2px) !important;
    line-height: 1.2 !important;
    max-height: calc(var(--ff-control-h) - 2px) !important;
    min-height: calc(var(--ff-control-h) - 2px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .btn {
    font-size: var(--ff-control-font-size, 11px) !important;
    min-height: var(--ff-control-h);
    padding-top: 2px;
    padding-bottom: 2px;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .checkbox,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .radio,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .checkbox-inline,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .radio-inline {
    font-size: var(--ff-control-font-size, 11px) !important;
    margin-top: 1px !important;
    margin-bottom: 1px !important;
    min-height: 18px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page:not(.ff-login) .checkbox label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page:not(.ff-login) .checkbox-inline label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page:not(.ff-login) .radio label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page:not(.ff-login) .radio-inline label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page:not(.ff-login) .clip-check label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page:not(.ff-login) .clip-radio label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page:not(.ff-login) .valuesonly,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page:not(.ff-login) .input-group-addon label {
    font-size: var(--ff-control-font-size, 11px) !important;
    line-height: 16px !important;
    min-height: 16px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-1 .form-group,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-3 .form-group,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs .form-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-1 label,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-3 label,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs label {
    align-items: center;
    display: flex;
    line-height: 16px;
    margin-bottom: 2px;
    min-height: 18px;
    white-space: nowrap;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-1 label,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-3 label,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-full-basic-docs label {
    line-height: 12px !important;
    margin-bottom: 1px !important;
    min-height: 12px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-1 input.form-control,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-3 .ui-select-bootstrap,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-3 .ui-select-match,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-3 .ui-select-toggle,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-3 .btn.form-control,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs input.form-control {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-page .dx-datagrid-total-footer {
    padding: 0 !important;
}

body.ff-app .ff-page .dx-datagrid-total-footer .dx-row > td {
    height: 22px !important;
    min-height: 22px !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

body.ff-app .ff-page .dx-datagrid-rowsview .dx-freespace-row,
body.ff-app .ff-page .dx-datagrid-rowsview .dx-freespace-row > td {
    border-top: 0 !important;
    border-bottom: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-page .dx-datagrid-pager {
    margin-top: 0 !important;
    min-height: 26px !important;
    padding: 0 4px !important;
}

body.ff-app .ff-page .dx-datagrid-pager .dx-page-sizes,
body.ff-app .ff-page .dx-datagrid-pager .dx-pages {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.ff-app .ff-page .dx-datagrid-pager .dx-info {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-page .dx-datagrid-pager .dx-page,
body.ff-app .ff-page .dx-datagrid-pager .dx-page-size,
body.ff-app .ff-page .dx-datagrid-pager .dx-navigate-button {
    line-height: 18px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 22px !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill .ff-linked-menu-action,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-full-courier-action {
    padding-top: 13px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs > .row > div:not([class]) > .ff-linked-menu-action {
    margin-left: -8px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-clone-action {
    align-self: flex-start;
    flex: 0 0 78px;
    max-width: 78px;
    padding-top: 18px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-full-clone-action {
    padding-top: 13px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-clone-action .btn {
    margin-top: 0 !important;
    min-width: 58px;
    width: 58px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-sr-switch-column {
    align-self: flex-start;
    display: flex;
    flex: 0 0 32px;
    justify-content: center;
    max-width: 32px;
    padding-top: 8px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-sr-switch-column .ff-sr-switch {
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
    width: 28px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-sr-switch-column {
    padding-top: 5px;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-sr-switch-column .ff-sr-switch {
    height: 22px !important;
    min-height: 22px !important;
    width: 24px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-sr-card .form-group:has(> .ff-geocode-inline) {
    position: relative;
}

body.ff-app .ff-waybill.ff-full-capture .ff-sr-card .form-group:has(> .ff-geocode-inline) > label {
    align-items: center;
    display: flex;
    gap: 6px;
    padding-right: 34px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-sr-card .ff-geocode-inline {
    float: none !important;
    margin: 0 !important;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-sr-card .ff-geocode-inline {
    height: 22px !important;
    min-height: 22px !important;
    width: 24px !important;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-row,
body.ff-app .ff-waybill .ff-additional-details .ff-additional-invoice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-row::before,
body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-row::after,
body.ff-app .ff-waybill .ff-additional-details .ff-additional-invoice-row::before,
body.ff-app .ff-waybill .ff-additional-details .ff-additional-invoice-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-row > [class*="col-"],
body.ff-app .ff-waybill .ff-additional-details .ff-additional-invoice-row > [class*="col-"] {
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-row > .col-md-3 {
    flex: 1 1 300px;
    max-width: none;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-invoice-row > .ff-linked-menu-field {
    flex: 0 1 115px;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-invoice-row > .ff-linked-menu-action {
    flex: 0 0 34px;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-invoice-row > .padding-left-0 {
    flex: 1 1 128px;
}

body.ff-app[data-grid-density="compact"] .ff-waybill .ff-pod-action {
    padding-top: 13px;
}

body.ff-app .ff-waybill .ff-pod-action {
    padding-top: 18px;
}

body.ff-app .ff-waybill .ff-pod-action .btn,
body.ff-app .ff-waybill .ff-pod-action > .btn {
    margin-top: 0 !important;
    white-space: nowrap;
    width: 100%;
}

body.ff-app .ff-page .dx-datagrid-total-footer,
body.ff-app .ff-page .dx-datagrid-total-footer .dx-datagrid-content,
body.ff-app .ff-page .dx-datagrid-total-footer .dx-datagrid-table {
    height: auto !important;
    min-height: 0 !important;
}

body.ff-app .ff-page .dx-datagrid-total-footer .dx-footer-row > td,
body.ff-app .ff-page .dx-datagrid-total-footer .dx-total-footer > td {
    height: 18px !important;
    line-height: 16px !important;
    min-height: 18px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-total-footer {
    margin-bottom: 0 !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager {
    border-top: 0 !important;
    min-height: 24px !important;
    padding-top: 0 !important;
}

/* Full capture final spacing refinements */
body.ff-app .ff-waybill.ff-full-capture .ff-sr-switch-column {
    flex-basis: 26px;
    max-width: 26px;
    padding-top: 6px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-sr-switch-column .ff-sr-switch {
    width: 24px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-sr-switch-column {
    flex-basis: 22px;
    max-width: 22px;
    padding-top: 4px;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-sr-switch-column .ff-sr-switch {
    width: 22px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-row {
    column-gap: 6px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-row > .ff-pod-date-time {
    flex-basis: 244px;
    min-width: 238px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-row > .ff-pod-person {
    flex-basis: 180px;
    min-width: 160px;
}

body.ff-app[data-grid-density="compact"] .ff-waybill .ff-additional-details .ff-linked-menu-action {
    padding-top: 14px !important;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-manifest-wrap {
    flex-basis: calc(9.5rem + 34px + 9rem);
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-manifest-wrap .ff-additional-linked-row {
    flex-wrap: nowrap;
    gap: 0;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-manifest-wrap .ff-additional-id-field {
    flex: 0 0 9.5rem;
    max-width: 9.5rem;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-manifest-wrap .ff-additional-id-action {
    flex: 0 0 34px;
    max-width: 34px;
    margin-right: 0 !important;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-manifest-wrap .ff-additional-date-field {
    flex: 0 0 9rem;
    margin-left: 0;
    max-width: 9rem;
}

/* Keep compact filter controls top-aligned on View Waybills. */
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-field,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-field .form-group {
    align-self: flex-start;
    margin-bottom: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group {
    align-items: stretch;
    display: flex;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group-addon {
    align-items: center;
    display: inline-flex;
    height: var(--ff-control-h) !important;
    line-height: 1 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group-addon input[type="checkbox"] {
    margin-top: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group-addon label {
    line-height: 1 !important;
    margin: 0 0 0 4px !important;
    min-height: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period select.form-control,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .form-control {
    flex: 1 1 auto;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    min-width: 0;
    width: auto !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row .ff-dx,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row .ff-dx,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ff-dx,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row .dx-widget,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row .dx-widget,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .dx-widget {
    display: block;
    margin-top: 0 !important;
    vertical-align: top;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Shared compact grid footer/pager rules for view/query grids. */
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-datagrid-content,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-scrollable-wrapper,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-scrollable-container,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-scrollable-content,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-datagrid-table {
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-row,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-row > td,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-footer-row,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-footer-row > td,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-total-footer,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-total-footer > td {
    height: 18px !important;
    line-height: 16px !important;
    min-height: 18px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-row,
body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-row > td,
body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-footer-row,
body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-footer-row > td,
body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-total-footer,
body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-total-footer > td {
    height: 16px !important;
    line-height: 15px !important;
    min-height: 16px !important;
}

body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-freespace-row,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-freespace-row > td {
    border: 0 !important;
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-page .dx-datagrid .dx-datagrid-rowsview .dx-freespace-row,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-rowsview .dx-freespace-row > td {
    border: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager,
body.ff-app .ff-page .dx-datagrid .dx-pager {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 22px !important;
    padding: 0 4px !important;
}

body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid .dx-datagrid-pager,
body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid .dx-pager {
    min-height: 20px !important;
}

body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager .dx-page-sizes,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager .dx-pages,
body.ff-app .ff-page .dx-datagrid .dx-pager .dx-page-sizes,
body.ff-app .ff-page .dx-datagrid .dx-pager .dx-pages {
    align-items: center;
    display: inline-flex;
    height: 22px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid .dx-datagrid-pager .dx-page-sizes,
body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid .dx-datagrid-pager .dx-pages,
body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid .dx-pager .dx-page-sizes,
body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid .dx-pager .dx-pages {
    height: 20px !important;
}

body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager .dx-info,
body.ff-app .ff-page .dx-datagrid .dx-pager .dx-info {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager .dx-page,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager .dx-page-size,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager .dx-navigate-button,
body.ff-app .ff-page .dx-datagrid .dx-pager .dx-page,
body.ff-app .ff-page .dx-datagrid .dx-pager .dx-page-size,
body.ff-app .ff-page .dx-datagrid .dx-pager .dx-navigate-button {
    line-height: 18px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 20px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager,
body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager {
    align-items: center !important;
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 22px !important;
    padding: 0 4px !important;
}

body.ff-app[data-grid-density="compact"] .ff-view-compact #gridContainer .dx-datagrid-pager,
body.ff-app[data-grid-density="compact"] .ff-view-compact .ff-grid-result-row .dx-datagrid-pager,
body.ff-app[data-grid-density="compact"] .ff-view-waybills #gridContainer .dx-datagrid-pager {
    min-height: 20px !important;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager .dx-page-sizes,
body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager .dx-pages,
body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-page-sizes,
body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-pages,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-page-sizes,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-pages {
    align-items: center !important;
    display: inline-flex !important;
    height: 22px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-view-compact #gridContainer .dx-datagrid-pager .dx-page-sizes,
body.ff-app[data-grid-density="compact"] .ff-view-compact #gridContainer .dx-datagrid-pager .dx-pages,
body.ff-app[data-grid-density="compact"] .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-page-sizes,
body.ff-app[data-grid-density="compact"] .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-pages,
body.ff-app[data-grid-density="compact"] .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-page-sizes,
body.ff-app[data-grid-density="compact"] .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-pages {
    height: 20px !important;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager .dx-info,
body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-info,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-info {
    margin: 0 4px !important;
    padding: 0 !important;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager .dx-page,
body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager .dx-page-size,
body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager .dx-navigate-button,
body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-page,
body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-page-size,
body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-navigate-button,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-page,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-page-size,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-navigate-button {
    line-height: 18px !important;
    margin: 0 1px !important;
    min-height: 20px !important;
    padding: 0 5px !important;
}

/* Shared compact result lead-in/footer for view pages. */
body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) > .container-fullw,
body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) > .container-fluid.container-fullw {
    padding: 4px 10px 8px !important;
}

body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) > .container-fullw > .row,
body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) > .container-fluid.container-fullw > .row {
    margin-bottom: 2px !important;
}

body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .accordion-no-display,
body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .accordion.panel-group,
body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .panel-group {
    margin: 0 !important;
}

body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .accordion-no-display .panel,
body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .accordion-no-display .panel-default {
    margin-bottom: 2px !important;
}

body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .accordion-no-display .panel-heading {
    min-height: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .accordion-no-display .panel-body {
    padding: 0 !important;
}

body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .ff-dash-menu,
body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .ff-dash-tiles {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
}

body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .ff-dash-button > a {
    padding: 4px 6px !important;
}

body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .ff-dash-button .panel-body {
    padding: 6px 0 !important;
}

body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .progress {
    height: 8px !important;
    margin: 0 0 2px !important;
    min-height: 8px !important;
}

body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .progress .progress-bar,
body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .progress .label {
    font-size: 10px !important;
    line-height: 8px !important;
    min-height: 8px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-page .ff-grid-toolbar-row,
body.ff-app .ff-page .ff-view-waybills-grid-toolbar-row {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
    min-height: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-page .ff-grid-toolbar-row > .ff-grid-toolbar-inner,
body.ff-app .ff-page .ff-grid-toolbar-row > .ff-grid-toolbar,
body.ff-app .ff-page .ff-view-waybills-grid-toolbar-row {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 6px !important;
}

body.ff-app .ff-page .ff-grid-toolbar-row > .ff-grid-toolbar-inner,
body.ff-app .ff-page .ff-grid-toolbar-row > .ff-grid-toolbar {
    min-height: 24px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-page .ff-grid-toolbar-row .label,
body.ff-app .ff-page .ff-view-waybills-grid-toolbar-row .label {
    align-items: center !important;
    display: inline-flex !important;
    line-height: 16px !important;
    margin: 0 !important;
    min-height: 20px !important;
    padding: 2px 6px !important;
}

body.ff-app .ff-page .ff-grid-toolbar-row .btn,
body.ff-app .ff-page .ff-grid-toolbar-row .ff-btn,
body.ff-app .ff-page .ff-view-waybills-grid-toolbar-row .btn {
    line-height: 18px !important;
    margin: 0 !important;
    min-height: 24px !important;
    padding: 2px 8px !important;
}

body.ff-app .ff-page .ff-grid-toolbar-row .checkbox,
body.ff-app .ff-page .ff-grid-toolbar-row .checkbox-inline,
body.ff-app .ff-page .ff-grid-toolbar-row .valuesonly,
body.ff-app .ff-page .ff-view-waybills-grid-toolbar-row .checkbox,
body.ff-app .ff-page .ff-view-waybills-grid-toolbar-row .checkbox-inline,
body.ff-app .ff-page .ff-view-waybills-grid-toolbar-row .valuesonly {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-page .ff-grid-toolbar-row .clip-check label,
body.ff-app .ff-page .ff-view-waybills-grid-toolbar-row .clip-check label {
    line-height: 20px !important;
    min-height: 20px !important;
}

body.ff-app .ff-page .ff-grid-toolbar-row .pull-right,
body.ff-app .ff-page .ff-view-waybills-grid-toolbar-row .pull-right {
    float: none !important;
    margin-left: auto !important;
}

body.ff-app .ff-page .ff-grid-status-filters {
    align-items: center !important;
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 2px 4px !important;
    margin-left: auto !important;
}

body.ff-app .ff-page .ff-grid-status-filters .label {
    margin: 0 !important;
}

body.ff-app .ff-page .ff-grid-toolbar-row + .ff-grid-result-row,
body.ff-app .ff-page .ff-view-waybills-grid-toolbar-row + .ff-grid-result-row {
    margin-top: 0 !important;
}

body.ff-app .ff-page .ff-grid-result-row > [class*="col-"],
body.ff-app .ff-page .ff-view-waybills-grid-row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) #gridContainer .dx-datagrid-header-panel {
    margin-bottom: 0 !important;
    margin-top: -24px !important;
    min-height: 24px !important;
}

body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) #gridContainer .dx-datagrid-header-panel .dx-toolbar,
body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) #gridContainer .dx-datagrid-header-panel .dx-toolbar-items-container {
    height: 24px !important;
    min-height: 24px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) #gridContainer .dx-datagrid-header-panel .dx-button,
body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) #gridContainer .dx-datagrid-header-panel .dx-button-content {
    min-height: 22px !important;
}

/* Shared compact pass for filter cards and alternate DevExtreme grid hosts. */
body.ff-app .ff-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) {
    margin-bottom: 3px !important;
    padding: 2px 10px 5px !important;
}

body.ff-app .ff-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) > legend,
body.ff-app .ff-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) > legend.ff-sr-legend {
    margin-bottom: 3px !important;
}

body.ff-app .ff-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) > .row {
    margin-bottom: 3px !important;
}

body.ff-app .ff-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) .form-group,
body.ff-app .ff-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) .dx-field {
    margin-bottom: 1px !important;
}

body.ff-app .ff-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) textarea.form-control,
body.ff-app .ff-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) textarea.autoExpand {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    overflow-y: auto;
    resize: none;
}

body.ff-app .ff-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) .padding-top-25,
body.ff-app .ff-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) .margin-top-30,
body.ff-app .ff-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) .padding-top-20 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) .padding-bottom-15,
body.ff-app .ff-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) .margin-bottom-10 {
    margin-bottom: 2px !important;
    padding-bottom: 2px !important;
}

body.ff-app .ff-page :is(#clientGridContainer, #waybillGridContainer, #gridContainer2, #gridContainer3) .dx-datagrid-header-panel,
body.ff-app .ff-page .ff-grid-result-row :is(#clientGridContainer, #waybillGridContainer, #gridContainer2, #gridContainer3) .dx-datagrid-header-panel {
    margin-bottom: 0 !important;
    margin-top: -24px !important;
    min-height: 24px !important;
}

body.ff-app .ff-page :is(#clientGridContainer, #waybillGridContainer, #gridContainer2, #gridContainer3) .dx-datagrid-header-panel .dx-toolbar,
body.ff-app .ff-page :is(#clientGridContainer, #waybillGridContainer, #gridContainer2, #gridContainer3) .dx-datagrid-header-panel .dx-toolbar-items-container {
    height: 24px !important;
    min-height: 24px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-page :is(#clientGridContainer, #waybillGridContainer, #gridContainer2, #gridContainer3) .dx-datagrid-pager,
body.ff-app .ff-page :is(#clientGridContainer, #waybillGridContainer, #gridContainer2, #gridContainer3) .dx-pager {
    margin: 0 !important;
    min-height: 20px !important;
    padding: 0 2px !important;
}

body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-datagrid-content,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-scrollable-wrapper,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-scrollable-container,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-scrollable-content,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-datagrid-table {
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-row,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-row > td,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-footer-row,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-footer-row > td,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-total-footer,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-total-footer > td {
    height: 16px !important;
    line-height: 15px !important;
    min-height: 16px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager,
body.ff-app .ff-page .dx-datagrid .dx-pager {
    margin: 0 !important;
    min-height: 20px !important;
    padding: 0 2px !important;
}

body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager .dx-page-sizes,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager .dx-pages,
body.ff-app .ff-page .dx-datagrid .dx-pager .dx-page-sizes,
body.ff-app .ff-page .dx-datagrid .dx-pager .dx-pages {
    height: 20px !important;
    min-height: 20px !important;
}

body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager .dx-info,
body.ff-app .ff-page .dx-datagrid .dx-pager .dx-info {
    line-height: 18px !important;
    margin: 0 4px !important;
    padding: 0 !important;
}

body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager .dx-page,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager .dx-page-size,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager .dx-navigate-button,
body.ff-app .ff-page .dx-datagrid .dx-pager .dx-page,
body.ff-app .ff-page .dx-datagrid .dx-pager .dx-page-size,
body.ff-app .ff-page .dx-datagrid .dx-pager .dx-navigate-button {
    line-height: 16px !important;
    margin: 0 1px !important;
    min-height: 18px !important;
    padding: 0 4px !important;
}

/* Query page compact filters: make ad hoc query filters match the dense view pages. */
body.ff-app .ff-query .ff-query-select-row {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 2px !important;
    overflow: visible !important;
    position: relative;
    z-index: 30;
}

body.ff-app .ff-query .ff-query-select-row::before,
body.ff-app .ff-query .ff-query-select-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-query .ff-query-select-row > [class*="col-"] {
    float: none;
    min-width: 0;
    overflow: visible !important;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    width: auto;
}

body.ff-app .ff-query .ff-query-select-row > .col-md-2 {
    flex: 0 1 165px;
}

body.ff-app .ff-query .ff-query-select-row > .col-md-3 {
    flex: 0 1 205px;
}

body.ff-app .ff-query .ff-query-select-row > .col-md-4 {
    flex: 1 1 340px;
    max-width: 620px;
}

body.ff-app .ff-query .ff-query-select-row > .ff-query-query-col {
    flex: 0 1 310px !important;
    max-width: 340px;
}

body.ff-app .ff-query .ff-query-select-row > .ff-query-recent-col {
    flex: 1 1 630px !important;
    max-width: none;
}

body.ff-app .ff-query .ff-query-select-row .form-group {
    margin-bottom: 0 !important;
    overflow: visible !important;
    position: relative;
}

body.ff-app .ff-query .ff-query-select-row .ff-query-recent-form-group {
    min-width: 0;
}

body.ff-app .ff-query .ff-query-select-row .ui-select-bootstrap.open,
body.ff-app .ff-query .ff-query-select-row .ui-select-bootstrap.open .ui-select-choices,
body.ff-app .ff-query .ff-query-select-row .ui-select-bootstrap.open .ui-select-no-choice,
body.ff-app .ff-ui.ui-select-bootstrap.open .ui-select-choices,
body.ff-app .ff-ui.ui-select-bootstrap.open .ui-select-no-choice {
    z-index: 3000 !important;
}

body.ff-app .ff-query .ff-query-select-row .ui-select-bootstrap .ui-select-no-choice,
body.ff-app .ff-ui.ui-select-bootstrap.open .ui-select-no-choice {
    background: var(--surface, #fff) !important;
    border: 1px solid var(--border, #d4dbe6) !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16) !important;
    color: var(--text, #111827) !important;
    line-height: 18px !important;
    min-height: 28px !important;
    padding: 5px 10px !important;
}

body.ff-app .ff-query .ff-query-select-row label,
body.ff-app .ff-query .accordion-no-display .ff-sr-card .form-group > label,
body.ff-app .ff-query .accordion-no-display .ff-sr-card .dx-field > label,
body.ff-app .ff-query .accordion-no-display .ff-sr-card > .row > [class*="col-"] > label,
body.ff-app .ff-query .accordion-no-display .ff-sr-card .ff-filter-field > label {
    display: block;
    line-height: 13px !important;
    margin: 0 0 1px !important;
    min-height: 13px !important;
    white-space: nowrap;
}

body.ff-app .ff-query .ff-query-select-row .form-control,
body.ff-app .ff-query .ff-query-select-row .ff-control,
body.ff-app .ff-query .ff-query-select-row .ui-select-container,
body.ff-app .ff-query .accordion-no-display .ff-sr-card .form-control,
body.ff-app .ff-query .accordion-no-display .ff-sr-card .ff-control,
body.ff-app .ff-query .accordion-no-display .ff-sr-card .ui-select-container,
body.ff-app .ff-query .accordion-no-display .ff-sr-card .ff-dx,
body.ff-app .ff-query .accordion-no-display .ff-sr-card .dx-texteditor {
    box-sizing: border-box;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    width: 100%;
}

body.ff-app .ff-query .ff-query-select-row .ui-select-bootstrap,
body.ff-app .ff-query .ff-query-select-row .ui-select-bootstrap > .ui-select-match,
body.ff-app .ff-query .accordion-no-display .ff-sr-card .ui-select-bootstrap,
body.ff-app .ff-query .accordion-no-display .ff-sr-card .ui-select-bootstrap > .ui-select-match {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-query .ff-query-select-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-query .accordion-no-display .ff-sr-card .ui-select-bootstrap > .ui-select-match > .btn {
    align-items: center;
    display: flex;
    height: var(--ff-control-h) !important;
    line-height: 1.2 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-query .ff-query-recent-row {
    margin: 2px 0 4px !important;
}

body.ff-app .ff-query .ff-query-recent-inner {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 4px 6px;
    height: var(--ff-control-h);
    max-height: var(--ff-control-h);
    min-height: var(--ff-control-h);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 !important;
    width: 100%;
}

body.ff-app .ff-query .ff-query-recent-title {
    color: var(--text-muted, #5f6b7a);
    font-weight: 700;
    line-height: 20px;
    margin-right: 2px;
    white-space: nowrap;
}

body.ff-app .ff-query .ff-query-recent-item {
    align-items: center;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #d4dbe6);
    border-radius: 4px;
    color: var(--text, #111827);
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    gap: 3px;
    height: 22px;
    line-height: 20px;
    max-width: 320px;
    min-height: 22px;
    overflow: hidden;
    padding: 0 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ff-app .ff-query .ff-query-recent-item:hover,
body.ff-app .ff-query .ff-query-recent-item:focus {
    background: var(--ff-primary-soft, #e9f1ff);
    border-color: var(--ff-primary, #337ef5);
    color: var(--ff-primary, #337ef5);
}

body.ff-app .ff-query .ff-query-recent-group,
body.ff-app .ff-query .ff-query-recent-query {
    display: inline-block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

body.ff-app .ff-query .ff-query-recent-group {
    max-width: 88px;
}

body.ff-app .ff-query .ff-query-recent-query {
    max-width: 190px;
}

body.ff-app .ff-query .ff-query-recent-separator {
    color: var(--text-muted, #5f6b7a);
    flex: 0 0 auto;
}

body.ff-app .ff-query .ff-query-filter-row {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 2px !important;
}

body.ff-app .ff-query .ff-query-filter-row > .accordion-no-display {
    width: 100%;
}

body.ff-app .ff-query .accordion-no-display .ff-sr-card {
    margin-bottom: 2px !important;
    padding: 0 10px 4px !important;
}

body.ff-app .ff-query .accordion-no-display fieldset > legend.ff-sr-legend {
    margin-bottom: 3px !important;
}

body.ff-app .ff-query .accordion-no-display .ff-sr-legend__text {
    padding: 3px 8px !important;
}

body.ff-app .ff-query .accordion-no-display .ff-sr-card > .row:not(.ff-waybill-filter-grid):not(.ff-filter-flow-row):not(.ff-filter-inline-row):not(.ff-filter-actions-row):not(.ff-finance-primary-filters):not(.ff-finance-filter-actions-row):not(.ff-finance-crdr-actions-row),
body.ff-app .ff-query .ff-finance-primary-filters,
body.ff-app .ff-query .ff-finance-date-block > .row {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 3px !important;
}

body.ff-app .ff-query .accordion-no-display .ff-sr-card > .row:not(.ff-waybill-filter-grid):not(.ff-filter-flow-row):not(.ff-filter-inline-row):not(.ff-filter-actions-row):not(.ff-finance-primary-filters):not(.ff-finance-filter-actions-row):not(.ff-finance-crdr-actions-row)::before,
body.ff-app .ff-query .accordion-no-display .ff-sr-card > .row:not(.ff-waybill-filter-grid):not(.ff-filter-flow-row):not(.ff-filter-inline-row):not(.ff-filter-actions-row):not(.ff-finance-primary-filters):not(.ff-finance-filter-actions-row):not(.ff-finance-crdr-actions-row)::after,
body.ff-app .ff-query .ff-finance-primary-filters::before,
body.ff-app .ff-query .ff-finance-primary-filters::after,
body.ff-app .ff-query .ff-finance-date-block > .row::before,
body.ff-app .ff-query .ff-finance-date-block > .row::after {
    content: none;
    display: none;
}

body.ff-app .ff-query .accordion-no-display .ff-sr-card > .row:not(.ff-waybill-filter-grid):not(.ff-filter-flow-row):not(.ff-filter-inline-row):not(.ff-filter-actions-row):not(.ff-finance-primary-filters):not(.ff-finance-filter-actions-row):not(.ff-finance-crdr-actions-row) > [class*="col-"],
body.ff-app .ff-query .ff-finance-primary-filters > [class*="col-"],
body.ff-app .ff-query .ff-finance-date-block > .row > [class*="col-"] {
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-query .accordion-no-display .ff-sr-card > .row:not(.ff-waybill-filter-grid):not(.ff-filter-flow-row):not(.ff-filter-inline-row):not(.ff-filter-actions-row):not(.ff-finance-primary-filters):not(.ff-finance-filter-actions-row):not(.ff-finance-crdr-actions-row) > .col-md-2,
body.ff-app .ff-query .ff-finance-primary-filters > .col-md-2 {
    flex: 0 1 145px;
}

body.ff-app .ff-query .accordion-no-display .ff-sr-card > .row:not(.ff-waybill-filter-grid):not(.ff-filter-flow-row):not(.ff-filter-inline-row):not(.ff-filter-actions-row):not(.ff-finance-primary-filters):not(.ff-finance-filter-actions-row):not(.ff-finance-crdr-actions-row) > .col-md-3 {
    flex: 0 1 190px;
}

body.ff-app .ff-query .accordion-no-display .ff-sr-card > .row:not(.ff-waybill-filter-grid):not(.ff-filter-flow-row):not(.ff-filter-inline-row):not(.ff-filter-actions-row):not(.ff-finance-primary-filters):not(.ff-finance-filter-actions-row):not(.ff-finance-crdr-actions-row) > .col-md-4,
body.ff-app .ff-query .ff-finance-primary-filters > .col-md-4 {
    flex: 1 1 260px;
}

body.ff-app .ff-query .ff-finance-client-filter,
body.ff-app .ff-query .ff-filter-client,
body.ff-app .ff-query .ff-query-generic-client-filter {
    flex: 0 1 155px !important;
    max-width: 180px !important;
    min-width: 130px !important;
}

body.ff-app .ff-query .accordion-no-display .ff-sr-card > .row:not(.ff-waybill-filter-grid):not(.ff-filter-flow-row):not(.ff-filter-inline-row):not(.ff-filter-actions-row):not(.ff-finance-primary-filters):not(.ff-finance-filter-actions-row):not(.ff-finance-crdr-actions-row) > .col-md-6 {
    flex: 1 1 400px;
}

body.ff-app .ff-query .accordion-no-display .ff-sr-card > .row:not(.ff-waybill-filter-grid):not(.ff-filter-flow-row):not(.ff-filter-inline-row):not(.ff-filter-actions-row):not(.ff-finance-primary-filters):not(.ff-finance-filter-actions-row):not(.ff-finance-crdr-actions-row) > .col-md-12 {
    flex: 1 1 100%;
}

body.ff-app .ff-query .ff-finance-date-block {
    flex: 1 1 455px !important;
    max-width: 100%;
}

body.ff-app .ff-query .ff-finance-date-period {
    flex: 0 1 210px;
}

body.ff-app .ff-query .ff-finance-date-range {
    flex: 1 1 236px;
}

body.ff-app .ff-query .ff-finance-date-range .range-picker,
body.ff-app .ff-query .ff-finance-date-range .range-picker .start-date,
body.ff-app .ff-query .ff-finance-date-range .range-picker .end-date {
    max-width: 100%;
}

body.ff-app .ff-query .accordion-no-display .ff-waybill-filter-grid {
    column-gap: 8px;
    grid-template-columns:
        minmax(140px, 0.75fr)
        minmax(135px, 0.72fr)
        minmax(165px, 0.85fr)
        minmax(236px, 1.05fr)
        minmax(160px, 0.9fr);
    margin-bottom: 3px;
    row-gap: 4px;
}

body.ff-app .ff-query .accordion-no-display .ff-filter-flow-row,
body.ff-app .ff-query .accordion-no-display .ff-filter-inline-row {
    gap: 4px 8px;
    margin-bottom: 3px;
}

body.ff-app .ff-query .accordion-no-display .ff-sr-card .form-group,
body.ff-app .ff-query .accordion-no-display .ff-sr-card .dx-field {
    margin-bottom: 0 !important;
}

body.ff-app .ff-query .accordion-no-display .ff-sr-card textarea.form-control,
body.ff-app .ff-query .accordion-no-display .ff-sr-card textarea.autoExpand {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    overflow-y: auto;
    resize: none;
    white-space: pre-wrap;
}

body.ff-app .ff-query .ff-filter-actions-row,
body.ff-app .ff-query .ff-finance-filter-actions-row,
body.ff-app .ff-query .ff-finance-crdr-actions-row,
body.ff-app .ff-query .ff-image-actions-row,
body.ff-app .ff-query .ff-query-generic-actions-row {
    margin-bottom: 0 !important;
}

body.ff-app .ff-query .ff-filter-actions,
body.ff-app .ff-query .ff-finance-filter-actions,
body.ff-app .ff-query .ff-finance-crdr-actions,
body.ff-app .ff-query .ff-image-filter-actions,
body.ff-app .ff-query .ff-query-generic-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    justify-content: flex-start;
    margin-bottom: 0 !important;
    min-height: var(--ff-control-h);
    padding-top: 0 !important;
}

body.ff-app .ff-query .ff-filter-actions .btn,
body.ff-app .ff-query .ff-filter-actions .checkbox,
body.ff-app .ff-query .ff-filter-actions .valuesonly,
body.ff-app .ff-query .ff-finance-filter-actions .btn,
body.ff-app .ff-query .ff-finance-filter-actions .checkbox,
body.ff-app .ff-query .ff-finance-filter-actions .valuesonly,
body.ff-app .ff-query .ff-finance-crdr-actions .btn,
body.ff-app .ff-query .ff-finance-crdr-actions .checkbox,
body.ff-app .ff-query .ff-finance-crdr-actions .valuesonly,
body.ff-app .ff-query .ff-image-filter-actions .btn,
body.ff-app .ff-query .ff-image-filter-actions .checkbox,
body.ff-app .ff-query .ff-query-generic-actions .btn,
body.ff-app .ff-query .ff-query-generic-actions .checkbox {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-query .ff-filter-actions .ff-filter-keep-open,
body.ff-app .ff-query .ff-finance-filter-actions .ff-finance-keep-filter,
body.ff-app .ff-query .ff-finance-crdr-actions .ff-finance-keep-filter,
body.ff-app .ff-query .ff-image-filter-actions .ff-image-keep-filter,
body.ff-app .ff-query .ff-query-generic-actions .ff-query-generic-keep-filter {
    margin-left: auto !important;
    order: 90;
}

body.ff-app .ff-query .ff-filter-actions .ff-filter-close,
body.ff-app .ff-query .ff-finance-filter-actions .ff-filter-close,
body.ff-app .ff-query .ff-finance-crdr-actions .ff-filter-close,
body.ff-app .ff-query .ff-image-filter-actions .ff-filter-close,
body.ff-app .ff-query .ff-query-generic-actions .ff-filter-close {
    align-items: center;
    display: inline-flex;
    flex: 0 0 var(--ff-control-h);
    justify-content: center;
    min-width: var(--ff-control-h);
    order: 95;
    padding-left: 0;
    padding-right: 0;
    width: var(--ff-control-h);
}

body.ff-app .ff-query .ff-filter-actions .ff-filter-search,
body.ff-app .ff-query .ff-finance-filter-actions .ff-finance-search,
body.ff-app .ff-query .ff-finance-crdr-actions .ff-finance-search,
body.ff-app .ff-query .ff-image-filter-actions .ff-image-search,
body.ff-app .ff-query .ff-query-generic-actions .ff-query-generic-search {
    order: 100;
}

body.ff-app .ff-query .ff-grid-toolbar-row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.ff-app .ff-query .ff-grid-toolbar-row > .ff-grid-toolbar-inner {
    gap: 1px 6px !important;
    min-height: 22px !important;
}

body.ff-app .ff-query .ff-grid-toolbar-row .padding-top-5 {
    padding-top: 0 !important;
}

body.ff-app .ff-query .ff-grid-result-row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.ff-app .ff-query .ff-grid-result-row > .col-md-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-query #gridContainer .dx-datagrid-header-panel,
body.ff-app .ff-query .ff-grid-result-row .dx-datagrid-header-panel {
    height: 0 !important;
    margin-bottom: 0 !important;
    margin-top: -24px !important;
    min-height: 0 !important;
    overflow: visible;
}

body.ff-app .ff-query #gridContainer .dx-datagrid-header-panel .dx-toolbar,
body.ff-app .ff-query #gridContainer .dx-datagrid-header-panel .dx-toolbar-items-container,
body.ff-app .ff-query .ff-grid-result-row .dx-datagrid-header-panel .dx-toolbar,
body.ff-app .ff-query .ff-grid-result-row .dx-datagrid-header-panel .dx-toolbar-items-container {
    height: 24px !important;
    min-height: 24px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Generate Invoice / Supplier Invoice: keep the invoice date and client/waybill grids tight. */
body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-date-row {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 2px !important;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-date-row::before,
body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-date-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-date-row > [class*="col-"] {
    float: none;
    max-width: 145px;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-date-row .form-group {
    margin-bottom: 0 !important;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-date-row label {
    line-height: 13px !important;
    margin: 0 0 1px !important;
    min-height: 13px !important;
    white-space: nowrap;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-date-row .input-icon,
body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-date-row input.form-control {
    display: block;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    width: 120px !important;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-selected-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 0 0 2px !important;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-selected-row::before,
body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-selected-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-selected-row > [class*="col-"] {
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-selected-row > .col-md-6:first-child {
    flex: 1 1 auto;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-selected-row > .col-md-6:last-child {
    flex: 0 0 auto;
    margin-left: auto;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-selected-row h4 {
    font-size: 13px;
    line-height: 20px;
    margin: 0 !important;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-selected-row .btn {
    min-height: 24px !important;
    padding: 2px 8px !important;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-client-grid,
body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-waybill-grid {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-client-grid > .col-md-12,
body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-waybill-grid > .col-md-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Generate Invoice: remove the dead space around Invoice Date and give the grid room for rows. */
body.ff-app .ff-generate-invoice .ff-page-header {
    margin-bottom: 2px !important;
}

body.ff-app .ff-generate-invoice > .container-fullw,
body.ff-app .ff-generate-invoice > .container-fluid.container-fullw {
    padding-top: 0 !important;
}

body.ff-app .ff-generate-invoice > .container-fullw > .row,
body.ff-app .ff-generate-invoice > .container-fluid.container-fullw > .row {
    margin-bottom: 0 !important;
}

body.ff-app .ff-generate-invoice .accordion-no-display,
body.ff-app .ff-generate-invoice .accordion.panel-group,
body.ff-app .ff-generate-invoice .panel-group,
body.ff-app .ff-generate-invoice .accordion-no-display .panel,
body.ff-app .ff-generate-invoice .accordion-no-display .panel-default {
    margin-bottom: 0 !important;
}

body.ff-app .ff-generate-invoice .ff-invoice-generate-date-row {
    gap: 0 8px !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-generate-invoice .ff-invoice-generate-date-row > [class*="col-"] {
    max-width: 126px !important;
}

body.ff-app .ff-generate-invoice .ff-invoice-generate-date-row .form-group {
    margin: 0 !important;
}

body.ff-app .ff-generate-invoice .ff-invoice-generate-date-row label {
    line-height: 14px !important;
    margin: 0 !important;
    min-height: 14px !important;
}

body.ff-app .ff-generate-invoice :is(#clientGridContainer, #waybillGridContainer) {
    height: clamp(320px, calc(100vh - 165px), 720px) !important;
    min-height: 320px !important;
    overflow: hidden !important;
}

body.ff-app .ff-generate-invoice :is(#clientGridContainer, #waybillGridContainer) .dx-datagrid {
    height: 100% !important;
    max-height: 100% !important;
}

body.ff-app .ff-generate-invoice :is(#clientGridContainer, #waybillGridContainer) .dx-datagrid-rowsview {
    min-height: calc(var(--ff-grid-row-height) * 8) !important;
}

/* Capture page compact field alignment and narrow date/time controls. */
body.ff-app[data-grid-density="compact"] .ff-waybill .ff-stages-capture .form-group,
body.ff-app[data-grid-density="compact"] .ff-waybill .ff-stages-capture .dx-field {
    margin-bottom: 1px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill .ff-stages-capture .ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-waybill .ff-stages-capture .ui-select-bootstrap,
body.ff-app[data-grid-density="compact"] .ff-waybill .ff-stages-capture .ui-select-bootstrap .ui-select-match,
body.ff-app[data-grid-density="compact"] .ff-waybill .ff-stages-capture .ff-dx,
body.ff-app[data-grid-density="compact"] .ff-waybill .ff-stages-capture .dx-field-value,
body.ff-app[data-grid-density="compact"] .ff-waybill .ff-stages-capture .dx-widget {
    display: block;
    float: none !important;
    margin-top: 0 !important;
    vertical-align: top;
}

body.ff-app[data-grid-density="compact"] .ff-waybill .ff-stages-capture .ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn,
body.ff-app[data-grid-density="compact"] .ff-waybill .ff-stages-capture .ui-select-bootstrap > .ui-select-match > .btn {
    align-items: center;
    display: flex;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill .ff-stages-capture .dx-field > label {
    display: block;
    float: none;
    margin-bottom: 1px !important;
    width: 100%;
}

body.ff-app[data-grid-density="compact"] .ff-waybill .ff-stages-capture .dx-field-value {
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .form-group > .row:has([mapbox-geocoder]) {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 2px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .form-group > .row:has([mapbox-geocoder]) > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill .ff-stages-capture [mapbox-geocoder],
body.ff-app .ff-waybill .ff-stages-capture .mapboxgl-ctrl-geocoder.mapboxgl-ctrl {
    box-sizing: border-box;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .mapboxgl-ctrl-geocoder--input {
    font-size: var(--ff-control-font-size, 12px) !important;
    height: calc(var(--ff-control-h) - 2px) !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    min-height: calc(var(--ff-control-h) - 2px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-postal-field {
    width: 110px !important;
    max-width: 110px;
    min-width: 96px;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-reference-field {
    width: 25% !important;
    max-width: 430px;
    min-width: 240px;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-date-field {
    width: 118px !important;
    max-width: 118px;
    min-width: 112px;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-time-field {
    width: 78px !important;
    max-width: 78px;
    min-width: 72px;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-date-field .input-icon,
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-date-field input.form-control[uib-datepicker-popup],
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-time-field input.time.settime {
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-time-field input.time.settime {
    max-width: 7ch !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-other-grid {
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-driver-field,
body.ff-app .ff-waybill.ff-full-capture .ff-full-schedule-field {
    flex-basis: 168px;
    max-width: 190px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-collection-grid {
    flex-basis: 300px;
    max-width: 330px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-delivery-grid {
    flex-basis: 330px;
    max-width: 395px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-date-field {
    flex-basis: 108px;
    max-width: 108px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-time-field {
    flex-basis: 68px;
    max-width: 68px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-date-field .input-icon,
body.ff-app .ff-waybill.ff-full-capture .ff-full-date-field input.form-control[uib-datepicker-popup],
body.ff-app .ff-waybill.ff-full-capture .ff-full-time-field input.time.settime,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-date-field .input-icon,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-date-field input.form-control[uib-datepicker-popup],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-time-field input.time.settime {
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-time-field input.time.settime,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-time-field input.time.settime {
    max-width: 7ch !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-top-row > .ff-quick-date-field {
    flex-basis: 122px;
    min-width: 112px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-top-row > .ff-quick-time-field {
    flex-basis: 76px;
    min-width: 72px;
}

/* Compact polish: keep required markers, filter lists, and narrow date/time fields aligned. */
body.ff-app .symbol.required {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    margin-left: 2px;
    vertical-align: baseline;
}

body.ff-app .symbol.required::before {
    display: inline-block;
    line-height: 1;
    position: static !important;
    top: auto !important;
    transform: none !important;
    vertical-align: baseline;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .form-group > label .symbol.required,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .control-label .symbol.required {
    align-self: center;
    margin-top: 0;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-collection-grid {
    flex-basis: 292px;
    max-width: 315px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-delivery-grid {
    flex-basis: 426px;
    max-width: 445px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-order-field {
    flex: 1 1 104px;
    min-width: 96px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-date-field {
    flex-basis: 96px;
    max-width: 96px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-time-field {
    flex-basis: 62px;
    max-width: 62px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-collection-grid > .row,
body.ff-app .ff-waybill.ff-full-capture .ff-full-delivery-grid > .row {
    gap: 4px 6px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-other-value-row {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-left: 0;
    margin-right: 0;
    padding-left: 12px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-other-value-row::before,
body.ff-app .ff-waybill.ff-full-capture .ff-full-other-value-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-other-value-row > [class*="col-"] {
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-other-value-row > .ff-full-value-field {
    flex: 0 1 160px;
    max-width: 190px;
    min-width: 96px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-date-field .input-icon,
body.ff-app .ff-waybill.ff-full-capture .ff-full-date-field input.form-control[uib-datepicker-popup],
body.ff-app .ff-waybill.ff-full-capture .ff-full-time-field input.time.settime {
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-time-field input.time.settime {
    max-width: none !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-row {
    column-gap: 6px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-row > .ff-pod-date-time {
    flex: 0 1 168px;
    min-width: 166px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-row > .ff-pod-person {
    flex: 0 1 110px;
    min-width: 104px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-date-time-row {
    gap: 6px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-date-time-row > .ff-pod-date {
    flex: 0 0 96px;
    min-width: 96px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-date-time-row > .ff-pod-time {
    flex: 0 0 62px;
    min-width: 62px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-time input.time.settime {
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row {
    align-items: flex-start;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-field,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-field .form-group,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-field .dx-field {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-field label,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-field label.width100,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-field .dx-field > label {
    align-items: center;
    display: flex;
    flex: 0 0 12px;
    height: 12px !important;
    line-height: 12px !important;
    margin: 0 0 1px !important;
    max-height: 12px !important;
    min-height: 12px !important;
    overflow: visible;
    white-space: nowrap;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-field label .pull-right,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-field label [json-dbl] {
    align-self: center;
    display: inline-block;
    float: none !important;
    font-size: 9px !important;
    line-height: 10px !important;
    margin-left: auto;
    margin-top: 0 !important;
    max-height: 11px;
    overflow: hidden;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group-addon,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period select.form-control {
    box-sizing: border-box;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group-addon {
    padding: 0 6px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period select.form-control {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row .ff-dx,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row .ff-dx,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ff-dx {
    flex: 0 0 var(--ff-control-h);
    margin-top: 0 !important;
}

/* Full capture polish: spacing, linked action alignment, and light-mode section glare. */
body.ff-app:not([data-theme="dark"]) .ff-waybill.ff-full-capture .ff-basic-details,
body.ff-app:not([data-theme="dark"]) .ff-waybill.ff-full-capture .ff-additional-details,
body.ff-app:not([data-theme="dark"]) .ff-waybill.ff-full-capture .ff-sr-card,
body.ff-app:not([data-theme="dark"]) .ff-waybill.ff-full-capture .ff-other-details {
    background: var(--surface-2);
}

body.ff-app .ff-waybill.ff-full-capture .ff-additional-details .ff-linked-menu-action {
    padding-top: 20px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-additional-details .ff-linked-menu-action {
    padding-top: 16px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-additional-details .ff-additional-manifest-wrap {
    flex-basis: calc(9.5rem + 34px + 9rem + 6px);
}

body.ff-app .ff-waybill.ff-full-capture .ff-additional-details .ff-additional-manifest-wrap .ff-additional-date-field {
    margin-left: 6px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-additional-details .ff-additional-manifest-list {
    flex: 0 1 15rem;
    margin-left: 4px;
    max-width: 15rem;
    min-width: 12rem;
}

body.ff-app .ff-waybill.ff-full-capture .ff-additional-details .ff-additional-manifest-list .input-group {
    max-width: 100%;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-additional-details .ff-additional-invoice-row {
    column-gap: 0;
}

body.ff-app .ff-waybill.ff-full-capture .ff-additional-details .ff-additional-invoice-row > .padding-left-0:not(.ff-linked-menu-action) {
    margin-left: 6px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-additional-details .ff-additional-meta-pair-row {
    column-gap: 8px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-additional-details .ff-additional-meta-field {
    min-width: 0;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-time-field {
    flex-basis: 78px;
    max-width: 78px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-time-field label,
body.ff-app .ff-waybill.ff-full-capture .ff-pod-time label {
    white-space: nowrap;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-row > .ff-pod-date-time {
    flex: 0 1 184px;
    min-width: 184px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-date-time-row > .ff-pod-time {
    flex: 0 0 78px;
    min-width: 78px;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill.ff-full-capture .ff-pod-row > .ff-pod-date-time {
    flex: 0 1 208px;
    min-width: 208px;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill.ff-full-capture .ff-pod-date-time-row > .ff-pod-date {
    flex: 0 0 124px;
    min-width: 124px;
}

/* View Waybills filter width polish: keep hub fields paired and let lists use spare row space. */
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid {
    grid-template-columns:
        minmax(140px, 0.7fr)
        minmax(150px, 0.75fr)
        minmax(165px, 0.85fr)
        minmax(236px, 1.05fr)
        minmax(190px, 1.1fr);
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row {
    gap: 6px 8px;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-client {
    flex: 2 1 300px;
    min-width: 250px;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-agent,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-driver {
    flex: 1.2 1 220px;
    min-width: 180px;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-acc {
    flex: 0 1 112px;
    min-width: 92px;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-vehicle,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-order {
    flex: 1 1 145px;
    min-width: 124px;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-schedule {
    flex: 1 1 180px;
    min-width: 160px;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-invoice,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-manifest-no,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-courier {
    flex: 0.8 1 132px;
    min-width: 116px;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-internal-id {
    flex: 0 1 92px;
    min-width: 82px;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-origin-hub,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-destination-hub {
    flex: 1.1 1 180px;
    min-width: 158px;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-town {
    flex: 1.2 1 230px;
    min-width: 190px;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-route,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-service,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-box,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-user,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-capture-method {
    flex: 1 1 190px;
    min-width: 160px;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-party {
    flex: 1.4 1 300px;
    min-width: 240px;
}

/* Compact-mode cleanup after field compression: keep required markers and filter rows aligned. */
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture label:has(.symbol.required) {
    align-items: center !important;
    display: flex !important;
    gap: 2px;
    line-height: 12px !important;
    min-height: 12px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture label:has(.symbol.required) .symbol.required {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    height: 12px;
    line-height: 12px;
    margin-left: 1px;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture label:has(.symbol.required) .symbol.required::before {
    align-items: center;
    display: inline-flex;
    font-size: 18px;
    height: 12px;
    line-height: 12px;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture label:has(.symbol.required) .pull-right {
    margin-left: auto;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .form-group > .ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .form-group > .ff-control.ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .form-group > .ui-select-bootstrap {
    margin-top: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid {
    align-items: start;
    column-gap: 8px;
    grid-template-columns:
        minmax(180px, 1fr)
        minmax(130px, 0.72fr)
        minmax(180px, 0.9fr)
        minmax(330px, 1.6fr)
        minmax(160px, 0.85fr);
    row-gap: 4px;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row {
    align-items: start;
    display: grid !important;
    gap: 4px 8px;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    margin-left: 0;
    margin-right: 0;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > [class*="col-"],
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-field {
    flex: none !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0;
    padding-right: 0;
    width: auto !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-client,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-party,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-parcel-desc {
    grid-column: span 2;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-pc-kgs-group {
    grid-column: span 4;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-bool-group {
    grid-column: 1 / -1;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row label,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row label,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid label {
    align-items: center;
    display: flex;
    gap: 3px;
    height: 14px !important;
    line-height: 14px !important;
    margin: 0 0 1px !important;
    min-height: 14px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-field label [json-dbl],
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid label [json-dbl] {
    align-items: center;
    display: inline-flex;
    float: none !important;
    font-size: 9px !important;
    height: 12px !important;
    line-height: 10px !important;
    margin-left: auto;
    margin-top: 0 !important;
    max-height: 12px !important;
    max-width: 58%;
    min-height: 12px !important;
    overflow: hidden;
    padding: 0 4px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row .form-group,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row .form-group,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .form-group {
    margin-bottom: 0 !important;
}

/* Compact final alignment pass: keep required labels and list controls on the same baseline. */
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .form-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .form-group > label,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture label.width100 {
    align-items: center !important;
    display: flex !important;
    gap: 2px;
    height: 12px !important;
    line-height: 12px !important;
    margin: 0 0 1px !important;
    min-height: 12px !important;
    overflow: visible;
    white-space: nowrap;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .form-group > label .symbol.required,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture label.width100 .symbol.required {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto;
    height: 12px !important;
    line-height: 12px !important;
    margin-left: 1px !important;
    min-height: 12px !important;
    vertical-align: middle !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .form-group > label .symbol.required::before,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture label.width100 .symbol.required::before {
    align-items: center !important;
    display: inline-flex !important;
    font-size: 18px !important;
    height: 12px !important;
    line-height: 12px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .form-group > .ff-control,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .form-group > .ff-input,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .form-group > .ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .form-group > .ui-select-bootstrap {
    margin-top: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ui-select-bootstrap > .ui-select-match > .btn {
    align-items: center !important;
    display: flex !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px 8px;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > [class*="col-"],
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-field {
    flex: 0 1 132px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-client {
    flex: 1.7 1 260px !important;
    min-width: 220px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-agent,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-driver {
    flex: 1.2 1 180px !important;
    min-width: 160px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-vehicle,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-ref,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-order {
    flex: 0.9 1 128px !important;
    min-width: 112px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-acc,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-internal-id {
    flex: 0 1 96px !important;
    min-width: 86px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-schedule {
    flex: 1.1 1 170px !important;
    min-width: 150px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-invoice,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-manifest-no,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-courier {
    flex: 0.8 1 122px !important;
    min-width: 108px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-origin-hub,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-destination-hub {
    flex: 1 1 168px !important;
    min-width: 148px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-town,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-party {
    flex: 1.2 1 190px !important;
    min-width: 160px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-route,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-service,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-box,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-user,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-capture-method {
    flex: 0.95 1 150px !important;
    min-width: 128px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-pc-kgs-group,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-extra-group {
    flex: 1 1 auto !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-bool-group {
    flex: 1 1 100% !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-client,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-party,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-parcel-desc,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-pc-kgs-group {
    grid-column: auto;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row label,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row label,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid label {
    align-items: center !important;
    display: flex !important;
    gap: 3px;
    height: 13px !important;
    line-height: 13px !important;
    margin: 0 0 1px !important;
    min-height: 13px !important;
    overflow: visible;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row .form-control,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row .form-control,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .form-control,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row .ff-control,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row .ff-control,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ff-control,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row .ff-dx,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row .ff-dx,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ff-dx {
    margin-top: 0 !important;
    width: 100% !important;
}

@media (max-width: 900px) {
    body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-field {
        flex-basis: 150px !important;
    }

    body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-client,
    body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-party {
        flex-basis: 100% !important;
    }
}

/* Full capture finishing pass: normal-mode required markers, time widths, charge density, and linked action buttons. */
body.ff-app .ff-waybill.ff-full-capture label:has(.symbol.required) {
    align-items: center !important;
    display: flex !important;
    gap: 2px;
    line-height: 16px !important;
    min-height: 18px !important;
    overflow: visible;
    white-space: nowrap;
}

body.ff-app .ff-waybill.ff-full-capture label:has(.symbol.required) .symbol.required {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto;
    height: 16px !important;
    line-height: 16px !important;
    margin-left: 1px !important;
    min-height: 16px !important;
    vertical-align: middle !important;
}

body.ff-app .ff-waybill.ff-full-capture label:has(.symbol.required) .symbol.required::before {
    align-items: center !important;
    display: inline-flex !important;
    font-size: 20px !important;
    height: 16px !important;
    line-height: 16px !important;
}

body.ff-app .ff-waybill.ff-full-capture label:has(.symbol.required) .pull-right {
    margin-left: auto;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-time-field {
    flex-basis: 70px;
    max-width: 70px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-delivery-grid .ff-full-time-field {
    flex-basis: 60px;
    max-width: 60px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-delivery-grid .ff-full-ready-time-field {
    margin-right: 6px;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-full-time-field {
    flex-basis: 66px;
    max-width: 66px;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-full-delivery-grid .ff-full-time-field {
    flex-basis: 56px;
    max-width: 56px;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-full-delivery-grid .ff-full-ready-time-field {
    margin-right: 5px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-additional-details .ff-linked-menu-action {
    padding-top: 18px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-additional-details .ff-linked-menu-action {
    padding-top: 13px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-additional-details .ff-linked-menu-action .dropdown-toggle,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs .ff-linked-menu-action .dropdown-toggle {
    height: var(--ff-control-h) !important;
    line-height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr.ff-charge-divider-row > td,
body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection__divider-row > td {
    height: 5px !important;
    line-height: 5px !important;
    padding: 0 !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-charge-summary-table .totalUL,
body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection__divider {
    margin: 2px 0 !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection--agent {
    margin-top: 0 !important;
    padding: 0 !important;
    position: relative;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__title {
    color: var(--primary) !important;
    left: 0;
    line-height: 18px !important;
    margin: 0 !important;
    position: absolute;
    top: 0;
}

/* View Waybills compact filter final sizing: preserve the grid/footer while widening lists and taming Date Period. */
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid {
    grid-template-columns:
        minmax(170px, 0.95fr)
        minmax(150px, 0.82fr)
        minmax(150px, 0.75fr)
        minmax(280px, 1.35fr)
        minmax(190px, 1fr);
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-period {
    max-width: 170px;
    min-width: 150px;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group {
    align-items: stretch;
    display: flex;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    width: 100%;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group-addon {
    align-items: center;
    display: inline-flex;
    flex: 0 0 54px;
    gap: 2px;
    justify-content: center;
    min-width: 54px;
    white-space: nowrap;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group-addon input[type="checkbox"] {
    height: 12px !important;
    margin: 0 !important;
    position: static !important;
    width: 12px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group-addon label {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    height: auto !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period select.form-control {
    flex: 1 1 auto;
    min-width: 0;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-client {
    flex: 2.1 1 330px !important;
    min-width: 280px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-agent,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-driver {
    flex: 1.45 1 240px !important;
    min-width: 200px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-schedule {
    flex: 1.35 1 230px !important;
    min-width: 190px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-origin-hub,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-destination-hub {
    flex: 1.35 1 230px !important;
    min-width: 190px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-town,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-party {
    flex: 1.5 1 250px !important;
    min-width: 210px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-route,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-service,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-box,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-user,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-capture-method {
    flex: 1.15 1 185px !important;
    min-width: 160px !important;
}

/* Full capture charges: make client/agent split clearer and keep subtotal dividers tight. */
body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection__title--client,
body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__title {
    color: var(--primary) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .08em;
    line-height: 16px !important;
    text-transform: uppercase;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection__title--client {
    margin: -1px 0 1px !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection--agent {
    border-top: 2px solid var(--primary) !important;
    margin-top: 2px !important;
    padding-top: 1px !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table > tbody > tr > td {
    height: 18px !important;
    line-height: 1.05 !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__divider-row > td {
    height: 3px !important;
    line-height: 3px !important;
    padding: 0 !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__divider {
    height: 1px;
    margin: 1px 0 !important;
}

/* Full capture rating/charges: keep label/value pairs compact and easier to follow. */
body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-col {
    flex-basis: 405px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-section {
    flex-basis: 182px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-vars-section {
    flex-basis: 196px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection__table {
    table-layout: auto !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed > tbody > tr:not(:last-child),
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr:not(:last-child):not(.ff-charge-divider-row),
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection__table > tbody > tr:not(:last-child):not(.ff-subsection__divider-row) {
    box-shadow: inset 0 -1px 0 var(--divider);
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed > tbody > tr > td:first-child {
    min-width: 112px !important;
    padding-left: 0 !important;
    padding-right: 4px !important;
    width: 112px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed > tbody > tr > td:last-child {
    min-width: 70px !important;
    padding-left: 4px !important;
    padding-right: 0 !important;
    width: 70px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr > td:first-child,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection__table > tbody > tr > td:first-child {
    min-width: 78px !important;
    padding-left: 0 !important;
    padding-right: 4px !important;
    width: 78px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr > td:last-child,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection__table > tbody > tr > td:last-child {
    min-width: 98px !important;
    padding-left: 4px !important;
    padding-right: 0 !important;
    width: 98px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr.ff-charge-total-row > td:last-child {
    padding-right: 0 !important;
}

/* Full capture linked action buttons: normal mode sits a touch lower and inside the field height. */
body.ff-app:not([data-grid-density="compact"]) .ff-waybill.ff-full-capture .ff-full-courier-action,
body.ff-app:not([data-grid-density="compact"]) .ff-waybill.ff-full-capture .ff-additional-details .ff-linked-menu-action {
    padding-top: 19px !important;
}

body.ff-app:not([data-grid-density="compact"]) .ff-waybill.ff-full-capture .ff-full-basic-docs .ff-linked-menu-action .dropdown-toggle,
body.ff-app:not([data-grid-density="compact"]) .ff-waybill.ff-full-capture .ff-additional-details .ff-linked-menu-action .dropdown-toggle {
    height: calc(var(--ff-control-h) - 2px) !important;
    line-height: 1 !important;
    max-height: calc(var(--ff-control-h) - 2px) !important;
    min-height: calc(var(--ff-control-h) - 2px) !important;
}

/* View Waybills compact filter hard override: keep lists useful and prevent stranded hub/user fields. */
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-waybill-filter-grid,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-flow-row,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-inline-row {
    align-items: flex-start !important;
    gap: 3px 6px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-waybill-filter-grid {
    column-gap: 6px !important;
    display: grid !important;
    grid-template-columns: 170px 150px 146px minmax(272px, 1fr) minmax(190px, 220px) !important;
    row-gap: 3px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-period {
    max-width: 146px !important;
    min-width: 146px !important;
    width: 146px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-date-period .form-group {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group {
    align-items: stretch !important;
    display: flex !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    width: 100% !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group-addon {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 48px !important;
    height: var(--ff-control-h) !important;
    justify-content: center !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    min-width: 48px !important;
    padding: 0 3px !important;
    white-space: nowrap !important;
    width: 48px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group-addon input[type="checkbox"] {
    height: 11px !important;
    margin: 0 2px 0 0 !important;
    min-height: 11px !important;
    position: static !important;
    vertical-align: middle !important;
    width: 11px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group-addon label {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 10px !important;
    height: auto !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-date-period select.form-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-client {
    flex: 1.75 1 300px !important;
    min-width: 260px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-agent,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-driver {
    flex: 1.25 1 220px !important;
    min-width: 185px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-vehicle {
    flex: 0.95 1 150px !important;
    min-width: 128px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-ref,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-order {
    flex: 0.85 1 126px !important;
    min-width: 112px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-acc,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-internal-id {
    flex: 0 1 82px !important;
    min-width: 76px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-schedule {
    flex: 1 1 150px !important;
    min-width: 130px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-invoice,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-manifest-no,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-courier {
    flex: 0.8 1 116px !important;
    min-width: 104px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-origin-hub,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-destination-hub {
    flex: 1.2 1 165px !important;
    min-width: 150px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-town,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-party {
    flex: 1.35 1 230px !important;
    min-width: 190px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-route,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-service,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-area,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-box {
    flex: 0.95 1 150px !important;
    min-width: 128px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-parcel-desc {
    flex: 1.2 1 220px !important;
    min-width: 180px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-capture-method,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-user {
    flex: 1.05 1 160px !important;
    min-width: 140px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-pc-kgs-group {
    flex: 1 1 420px !important;
    min-width: 360px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-zone {
    flex: 0 1 54px !important;
    min-width: 48px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-ring-code,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-receiver-acc {
    flex: 0 1 110px !important;
    min-width: 96px !important;
}

@media (max-width: 1100px) {
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-waybill-filter-grid {
        grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
    }

    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-origin-hub,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-destination-hub {
        flex-basis: 180px !important;
    }
}

/* Final page-scoped polish: use a root class so compact View Waybills filters are not dependent on body selector support. */
body.ff-app:not([data-grid-density="compact"]) .ff-waybill.ff-full-capture .ff-full-courier-action {
    padding-top: 20px !important;
}

body.ff-app:not([data-grid-density="compact"]) .ff-waybill.ff-full-capture .ff-additional-details .ff-linked-menu-action {
    padding-top: 19px !important;
}

body.ff-app:not([data-grid-density="compact"]) .ff-waybill.ff-full-capture .ff-additional-details .ff-linked-menu-action .dropdown-toggle {
    align-items: center !important;
    display: inline-flex !important;
    height: calc(var(--ff-control-h) - 4px) !important;
    justify-content: center !important;
    line-height: 1 !important;
    max-height: calc(var(--ff-control-h) - 4px) !important;
    min-height: calc(var(--ff-control-h) - 4px) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table > tbody > tr.ff-subsection__divider-row,
body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table > tbody > tr.ff-subsection__divider-row > td {
    border: 0 !important;
    height: 1px !important;
    line-height: 1px !important;
    max-height: 1px !important;
    min-height: 1px !important;
    padding: 0 !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__divider {
    border-bottom: 1px solid var(--divider) !important;
    height: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-sr-card {
    padding: 4px 12px 6px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-flow-row,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-inline-row {
    align-items: flex-start !important;
    gap: 4px 10px !important;
    margin-bottom: 4px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid {
    column-gap: 10px !important;
    display: grid !important;
    grid-template-columns: minmax(210px, .9fr) minmax(160px, .7fr) 152px minmax(392px, 1.45fr) minmax(220px, .95fr) !important;
    row-gap: 3px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > [class*="col-"],
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-flow-row > [class*="col-"],
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-inline-row > [class*="col-"] {
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-field .form-group {
    margin-bottom: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-field label,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid label {
    align-items: center !important;
    display: flex !important;
    gap: 3px !important;
    height: 13px !important;
    line-height: 13px !important;
    margin: 0 0 1px !important;
    min-height: 13px !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-field label [json-dbl],
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid label [json-dbl] {
    align-items: center !important;
    display: inline-flex !important;
    float: none !important;
    font-size: 9px !important;
    height: 12px !important;
    line-height: 10px !important;
    margin-left: auto !important;
    margin-top: 0 !important;
    max-height: 12px !important;
    max-width: 58% !important;
    min-height: 12px !important;
    overflow: hidden !important;
    padding: 0 4px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-field .form-control,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-field .ff-control,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-field .ui-select-container,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-field .ff-dx,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-field .dx-widget {
    height: var(--ff-control-h) !important;
    margin-top: 0 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-field .ui-select-bootstrap,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-field .ui-select-bootstrap > .ui-select-match,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-field .ui-select-bootstrap > .ui-select-match > .btn {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-field .ui-select-bootstrap > .ui-select-match > .btn {
    align-items: center !important;
    display: flex !important;
    line-height: 1.1 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period {
    max-width: 152px !important;
    min-width: 152px !important;
    width: 152px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .input-group {
    align-items: stretch !important;
    display: flex !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .input-group-addon {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 50px !important;
    height: var(--ff-control-h) !important;
    justify-content: center !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    min-width: 50px !important;
    padding: 0 3px !important;
    white-space: nowrap !important;
    width: 50px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .input-group-addon input[type="checkbox"] {
    flex: 0 0 auto !important;
    height: 11px !important;
    margin: 0 2px 0 0 !important;
    min-height: 11px !important;
    position: static !important;
    width: 11px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .input-group-addon label {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 10px !important;
    height: auto !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period select.form-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-client {
    flex: 1.8 1 280px !important;
    min-width: 240px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-acc {
    flex: 0 1 132px !important;
    min-width: 112px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-agent,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-driver {
    flex: 1.35 1 240px !important;
    min-width: 200px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-vehicle {
    flex: 1.1 1 220px !important;
    min-width: 180px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-order {
    flex: 1 1 210px !important;
    min-width: 170px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-schedule {
    flex: 1.35 1 250px !important;
    min-width: 210px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-invoice,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-manifest-no,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-courier {
    flex: 0.95 1 170px !important;
    min-width: 145px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-internal-id {
    flex: 0 1 118px !important;
    min-width: 96px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-origin-hub,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-destination-hub {
    flex: 1.35 1 230px !important;
    min-width: 195px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-town,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-party {
    flex: 1.45 1 250px !important;
    min-width: 210px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-route,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-service,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-box,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-user,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-capture-method {
    flex: 1.15 1 205px !important;
    min-width: 175px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-parcel-desc {
    flex: 1.2 1 250px !important;
    min-width: 210px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-pc-kgs-group {
    flex: 1 1 500px !important;
    min-width: 420px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-area,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-zone,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-ring-code,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-receiver-acc {
    flex: 0 1 132px !important;
    min-width: 110px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-bool-group {
    flex: 1 1 100% !important;
}

@media (max-width: 1200px) {
    body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid {
        grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
    }
}

/* Compact header: keep page-history chips close together and fully visible in the blue banner. */
body.ff-app[data-grid-density="compact"] #historyTabs,
body.ff-app.ff-grid-density-compact #historyTabs {
    height: 38px !important;
    top: 3px !important;
    overflow: hidden !important;
}

body.ff-app[data-grid-density="compact"] .ff-shell .ff-topnav .ff-historybar-wrap,
body.ff-app.ff-grid-density-compact .ff-shell .ff-topnav .ff-historybar-wrap {
    overflow: visible !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-shell .ff-topnav .ff-historybar-wrap #history-tabs-inner,
body.ff-app.ff-grid-density-compact .ff-shell .ff-topnav .ff-historybar-wrap #history-tabs-inner {
    height: 36px !important;
    overflow: visible !important;
}

body.ff-app[data-grid-density="compact"] .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs,
body.ff-app.ff-grid-density-compact .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs {
    align-items: center !important;
    gap: 2px !important;
    height: 36px !important;
    overflow: visible !important;
    padding: 3px 4px 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page,
body.ff-app.ff-grid-density-compact .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page {
    flex: 0 1 auto !important;
    max-width: 122px !important;
}

body.ff-app[data-grid-density="compact"] .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li > a,
body.ff-app.ff-grid-density-compact .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li > a {
    box-sizing: border-box !important;
    height: 28px !important;
    line-height: 1 !important;
    max-height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
}

body.ff-app[data-grid-density="compact"] .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-action > a,
body.ff-app.ff-grid-density-compact .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-action > a {
    min-width: 28px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
}

/* Full capture final nudge: normal-mode date fields need the full year, courier action should match field height. */
body.ff-app:not([data-grid-density="compact"]) .ff-waybill.ff-full-capture .ff-full-date-field {
    flex-basis: 104px !important;
    max-width: 104px !important;
}

body.ff-app:not([data-grid-density="compact"]) .ff-waybill.ff-full-capture .ff-full-courier-action .dropdown-toggle {
    height: calc(var(--ff-control-h) + 2px) !important;
    max-height: calc(var(--ff-control-h) + 2px) !important;
    min-height: calc(var(--ff-control-h) + 2px) !important;
}

/* Full capture: show existing-waybill verification without adding another row. */
body.ff-app .ff-waybill.ff-full-capture .ff-full-waybill-label-row {
    align-items: flex-start;
    display: flex;
    gap: 6px;
    justify-content: space-between;
    min-height: 17px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-waybill-label-row > label {
    margin-bottom: 0;
    min-width: 0;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-verified-inline {
    flex: 0 0 auto;
    margin: 0 !important;
    min-height: 16px !important;
    padding-left: 0 !important;
    position: relative;
    top: -4px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-verified-inline.clip-check label {
    line-height: 16px !important;
    margin: 0 !important;
    min-height: 16px !important;
    padding-left: 22px !important;
    white-space: nowrap;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-full-verified-inline {
    top: -7px;
}

/* View Waybills compact filter trim: keep wrapped fields useful instead of full-row wide. */
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period {
    flex: 0 0 150px !important;
    max-width: 150px !important;
    min-width: 150px !important;
    width: 150px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .input-group,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .input-group-addon,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period select.form-control {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .input-group {
    align-items: center !important;
    overflow: hidden !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .input-group-addon {
    flex: 0 0 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
    width: 48px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period #ignoreDate + label {
    align-items: center !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    font-size: 10px !important;
    height: var(--ff-control-h) !important;
    line-height: 1 !important;
    margin: 0 !important;
    max-height: var(--ff-control-h) !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 2px 0 17px !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period #ignoreDate + label::before {
    border-radius: 3px !important;
    height: 10px !important;
    left: 2px !important;
    width: 10px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period #ignoreDate + label::after {
    height: 3px !important;
    left: 4px !important;
    width: 6px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period select.form-control {
    padding-left: 5px !important;
    padding-right: 4px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-client {
    max-width: 520px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-agent,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-driver {
    max-width: 430px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-vehicle {
    max-width: 330px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-order {
    flex: 0 1 190px !important;
    max-width: 260px !important;
    min-width: 145px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-schedule {
    flex: 0 1 230px !important;
    max-width: 300px !important;
    min-width: 170px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-invoice,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-manifest-no,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-courier {
    flex: 0 1 170px !important;
    max-width: 230px !important;
    min-width: 135px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-internal-id {
    flex: 0 1 118px !important;
    max-width: 135px !important;
    min-width: 90px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-origin-hub,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-destination-hub {
    flex: 0 1 230px !important;
    max-width: 330px !important;
    min-width: 165px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-town,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-party {
    max-width: 520px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-route,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-service,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-box,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-user,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-capture-method {
    flex: 0 1 195px !important;
    max-width: 270px !important;
    min-width: 150px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-parcel-desc {
    flex: 0 1 260px !important;
    max-width: 360px !important;
    min-width: 190px !important;
}

/* View Waybills compact filter second pass: prevent single-field orphan rows. */
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .input-group {
    align-items: flex-start !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .input-group-addon {
    align-items: flex-start !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period #ignoreDate + label {
    height: 18px !important;
    line-height: 18px !important;
    max-height: 18px !important;
    min-height: 18px !important;
    transform: translateY(-1px);
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period select.form-control {
    padding-top: 1px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-client {
    flex: 1 1 360px !important;
    max-width: 430px !important;
    min-width: 300px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-acc {
    flex: 0 1 155px !important;
    max-width: 180px !important;
    min-width: 120px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-agent,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-driver {
    flex: 1 1 300px !important;
    max-width: 350px !important;
    min-width: 245px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-vehicle {
    flex: 0 1 260px !important;
    max-width: 300px !important;
    min-width: 215px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-order {
    flex: 0 1 190px !important;
    max-width: 220px !important;
    min-width: 145px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-schedule {
    flex: 0 1 250px !important;
    max-width: 280px !important;
    min-width: 185px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-invoice,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-manifest-no,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-courier {
    flex: 0 1 180px !important;
    max-width: 210px !important;
    min-width: 135px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-internal-id {
    flex: 0 1 116px !important;
    max-width: 125px !important;
    min-width: 88px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-origin-hub,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-destination-hub {
    flex: 0 1 265px !important;
    max-width: 300px !important;
    min-width: 185px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-town {
    flex: 1 1 470px !important;
    max-width: 560px !important;
    min-width: 330px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-route,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-service {
    flex: 0 1 245px !important;
    max-width: 285px !important;
    min-width: 190px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-party {
    flex: 1 1 390px !important;
    max-width: 430px !important;
    min-width: 280px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-receiver-acc {
    flex: 0 1 150px !important;
    max-width: 175px !important;
    min-width: 115px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-box {
    flex: 0 1 210px !important;
    max-width: 240px !important;
    min-width: 160px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-parcel-desc {
    flex: 0 1 290px !important;
    max-width: 330px !important;
    min-width: 205px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-capture-method,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-user {
    flex: 0 1 215px !important;
    max-width: 245px !important;
    min-width: 165px !important;
}

/* View Waybills compact filter final pass: reduce orphan rows and lift Date Period contents. */
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .input-group {
    align-items: flex-start !important;
    height: 22px !important;
    max-height: 22px !important;
    min-height: 22px !important;
    transform: translateY(-2px);
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .input-group-addon {
    align-items: center !important;
    height: 22px !important;
    line-height: 14px !important;
    max-height: 22px !important;
    min-height: 22px !important;
    padding: 0 3px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period #ignoreDate {
    margin-top: 0 !important;
    position: relative !important;
    top: -1px;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period #ignoreDate + label {
    height: 14px !important;
    line-height: 14px !important;
    max-height: 14px !important;
    min-height: 14px !important;
    transform: translateY(-1px);
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period select.form-control {
    height: 22px !important;
    line-height: 18px !important;
    max-height: 22px !important;
    min-height: 22px !important;
    padding-bottom: 1px !important;
    padding-top: 0 !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-driver {
    flex: 0 1 160px !important;
    max-width: 190px !important;
    min-width: 130px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-town {
    flex: 0 1 265px !important;
    max-width: 300px !important;
    min-width: 185px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-party {
    flex: 0 1 275px !important;
    max-width: 310px !important;
    min-width: 200px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-parcel-desc {
    flex: 0 1 145px !important;
    max-width: 170px !important;
    min-width: 120px !important;
}

/* View Waybills compact filter spacing: keep common fields close and avoid oversized yes/no controls. */
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid {
    grid-template-columns: 170px 150px 146px 330px minmax(210px, 250px) !important;
    justify-content: start !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-range {
    max-width: 330px !important;
    min-width: 310px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch {
    max-width: 250px !important;
    min-width: 210px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-agent {
    flex: 0 1 260px !important;
    max-width: 290px !important;
    min-width: 210px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-driver {
    flex: 1 1 340px !important;
    max-width: 420px !important;
    min-width: 260px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-zone {
    flex: 0 1 82px !important;
    max-width: 92px !important;
    min-width: 64px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-bool-group {
    flex: 1 1 100% !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-bool-group .ff-filter-inline-row {
    gap: 3px 8px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-bool-group .ff-filter-bool {
    flex: 0 1 90px !important;
    max-width: 98px !important;
    min-width: 76px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-bool-group .ff-filter-bool-wide,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-bool-group .ff-filter-security {
    flex: 0 1 116px !important;
    max-width: 126px !important;
    min-width: 96px !important;
}

/* View Waybills compact Date Period: override the global ignore-date checkbox height directly. */
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-group,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-group {
    align-items: flex-start !important;
    display: inline-flex !important;
    height: 24px !important;
    max-height: 24px !important;
    min-height: 24px !important;
    transform: none !important;
    width: 100% !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-ignore,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-ignore {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 66px !important;
    height: 24px !important;
    justify-content: flex-start !important;
    line-height: 24px !important;
    max-height: 24px !important;
    min-height: 24px !important;
    min-width: 66px !important;
    padding: 0 !important;
    vertical-align: top !important;
    width: 66px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label {
    align-items: center !important;
    display: inline-flex !important;
    font-size: var(--ff-control-font-size, 11px) !important;
    height: 24px !important;
    justify-content: flex-start !important;
    line-height: 24px !important;
    margin: 0 !important;
    max-height: 24px !important;
    min-height: 24px !important;
    min-width: 0 !important;
    padding: 0 4px 0 24px !important;
    transform: none !important;
    width: 100% !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before {
    height: 12px !important;
    left: 6px !important;
    top: 50% !important;
    width: 12px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after {
    height: 4px !important;
    left: 9px !important;
    top: 50% !important;
    width: 7px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-select,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-select {
    flex: 1 1 auto !important;
    height: 24px !important;
    line-height: 20px !important;
    max-height: 24px !important;
    min-height: 24px !important;
    min-width: 0 !important;
    padding-bottom: 1px !important;
    padding-left: 6px !important;
    padding-top: 1px !important;
    width: auto !important;
}

/* View Waybills normal mode: use the same space-saving field priorities as compact mode. */
body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-waybill-filter-grid {
    grid-template-columns: 170px 170px 190px 330px minmax(210px, 250px) !important;
    justify-content: start !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-waybill-filter-grid > .ff-filter-date-range {
    max-width: 330px !important;
    min-width: 310px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-waybill-filter-grid > .ff-filter-branch {
    max-width: 250px !important;
    min-width: 210px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-client-row,
body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-manifest-row,
body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-waybill-route-row {
    gap: 5px 8px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-client-row > .ff-filter-client {
    flex: 1 1 360px !important;
    max-width: 430px !important;
    min-width: 300px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-client-row > .ff-filter-agent {
    flex: 0 1 260px !important;
    max-width: 290px !important;
    min-width: 210px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-client-row > .ff-filter-driver {
    flex: 1 1 340px !important;
    max-width: 420px !important;
    min-width: 260px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-client-row > .ff-filter-vehicle {
    flex: 0 1 260px !important;
    max-width: 300px !important;
    min-width: 215px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-client-row > .ff-filter-order {
    flex: 0 1 190px !important;
    max-width: 220px !important;
    min-width: 145px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-manifest-row > .ff-filter-schedule {
    flex: 0 1 250px !important;
    max-width: 280px !important;
    min-width: 185px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-manifest-row > .ff-filter-invoice,
body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-manifest-row > .ff-filter-manifest-no,
body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-manifest-row > .ff-filter-courier {
    flex: 0 1 180px !important;
    max-width: 210px !important;
    min-width: 135px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-manifest-row > .ff-filter-internal-id {
    flex: 0 1 116px !important;
    max-width: 125px !important;
    min-width: 88px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-manifest-row > .ff-filter-origin-hub,
body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-manifest-row > .ff-filter-destination-hub {
    flex: 0 1 265px !important;
    max-width: 300px !important;
    min-width: 185px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-waybill-route-row > .ff-filter-town {
    flex: 0 1 265px !important;
    max-width: 300px !important;
    min-width: 185px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-waybill-route-row > .ff-filter-route,
body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-waybill-route-row > .ff-filter-service {
    flex: 0 1 245px !important;
    max-width: 285px !important;
    min-width: 190px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-waybill-route-row > .ff-filter-party {
    flex: 0 1 275px !important;
    max-width: 310px !important;
    min-width: 200px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-waybill-route-row > .ff-filter-receiver-acc {
    flex: 0 1 150px !important;
    max-width: 175px !important;
    min-width: 115px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-waybill-route-row > .ff-filter-area,
body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-waybill-route-row > .ff-filter-box,
body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-waybill-route-row > .ff-filter-user,
body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-waybill-route-row > .ff-filter-capture-method {
    flex: 0 1 215px !important;
    max-width: 245px !important;
    min-width: 165px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-waybill-route-row > .ff-filter-zone {
    flex: 0 1 82px !important;
    max-width: 92px !important;
    min-width: 64px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-waybill-route-row > .ff-filter-parcel-desc {
    flex: 0 1 145px !important;
    max-width: 170px !important;
    min-width: 120px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-waybill-route-row > .ff-filter-bool-group {
    flex: 1 1 100% !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-bool-group .ff-filter-inline-row {
    gap: 4px 8px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-bool-group .ff-filter-bool {
    flex: 0 1 96px !important;
    max-width: 108px !important;
    min-width: 82px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-bool-group .ff-filter-bool-wide,
body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-bool-group .ff-filter-security {
    flex: 0 1 126px !important;
    max-width: 138px !important;
    min-width: 106px !important;
}

/* Full capture rating polish: fixed-width rating blocks and value-side guide lines only. */
body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-col {
    flex: 0 0 420px !important;
    max-width: 420px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-calc-col {
    flex: 0 0 395px !important;
    max-width: 395px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-section {
    flex: 0 0 204px !important;
    max-width: 204px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-vars-section {
    flex: 0 0 190px !important;
    max-width: 190px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-fcalc-section {
    flex: 0 0 232px !important;
    max-width: 232px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-mass-section {
    flex: 0 0 150px !important;
    max-width: 150px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr:not(.ff-charge-divider-row),
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection__table > tbody > tr:not(.ff-subsection__divider-row),
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed > tbody > tr {
    box-shadow: none !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed > tbody > tr:not(:last-child) > td:last-child {
    box-shadow: inset 0 -1px 0 var(--divider);
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table .totalUL {
    border-bottom-color: var(--border) !important;
    border-bottom-width: 2px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection__divider {
    background: var(--border) !important;
    height: 2px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table {
    margin-left: 34px !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table > tbody > tr > td:first-child {
    min-width: 62px !important;
    width: 62px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table > tbody > tr > td:last-child {
    min-width: 86px !important;
    width: 86px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-mass-section table.table-condensed {
    table-layout: auto !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-mass-section table.table-condensed > tbody > tr > td:first-child {
    min-width: 76px !important;
    padding-left: 0 !important;
    padding-right: 4px !important;
    width: 76px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-mass-section table.table-condensed > tbody > tr > td:last-child {
    min-width: 64px !important;
    padding-left: 4px !important;
    padding-right: 0 !important;
    width: 64px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-sr-card label.width100 {
    align-items: center;
    display: flex;
    gap: 2px;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-sr-card label.width100 > .text-primary.pull-right {
    float: none !important;
    margin-left: auto !important;
    text-align: right;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-waybill-label-row {
    margin-bottom: 3px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-verified-inline {
    margin-left: 8px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-additional-verified {
    display: none !important;
}

@media (min-width: 768px) {
    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--waybill {
        flex: 0 0 auto !important;
        max-width: 220px !important;
    }

    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--waybill > a {
        max-width: 220px !important;
        width: max-content !important;
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--waybill,
    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--waybill > a {
        max-width: 180px !important;
    }
}

@media (min-width: 768px) and (max-width: 1000px) {
    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--waybill,
    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--waybill > a {
        max-width: 150px !important;
    }
}

body.ff-app[data-grid-density="compact"] .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--waybill,
body.ff-app.ff-grid-density-compact .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--waybill,
body.ff-app[data-grid-density="compact"] .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--waybill > a,
body.ff-app.ff-grid-density-compact .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--waybill > a {
    max-width: 170px !important;
}

/* View Waybills filter final layout: keep date/branch and hub/town fields on useful rows. */
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid {
    column-gap: 8px !important;
    grid-template-columns:
        minmax(150px, .85fr)
        minmax(132px, .72fr)
        154px
        minmax(292px, 320px)
        minmax(220px, 1fr) !important;
    justify-content: start !important;
    row-gap: 3px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-period,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-period {
    max-width: 154px !important;
    min-width: 154px !important;
    width: 154px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-range,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-range {
    max-width: 320px !important;
    min-width: 292px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-branch,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch {
    max-width: 280px !important;
    min-width: 220px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-group,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .ff-date-period-group,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-group,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-group {
    align-items: center !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    max-width: 154px !important;
    min-height: var(--ff-control-h) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    width: 154px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-ignore,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .ff-date-period-ignore,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-ignore,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-ignore {
    align-items: center !important;
    align-self: stretch !important;
    display: flex !important;
    flex: 0 0 auto !important;
    height: var(--ff-control-h) !important;
    justify-content: flex-start !important;
    line-height: 1 !important;
    max-height: var(--ff-control-h) !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
    width: 58px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label {
    align-items: center !important;
    display: flex !important;
    font-size: var(--ff-control-font-size, 11px) !important;
    height: var(--ff-control-h) !important;
    justify-content: flex-start !important;
    line-height: 1 !important;
    margin: 0 !important;
    max-height: var(--ff-control-h) !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 2px 0 20px !important;
    position: relative !important;
    transform: none !important;
    width: 58px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before {
    height: 11px !important;
    left: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 11px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after {
    height: 4px !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-70%) rotate(-45deg) !important;
    width: 7px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-select,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .ff-date-period-select,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-select,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-select {
    height: var(--ff-control-h) !important;
    line-height: 1.15 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    min-width: 0 !important;
    padding: 0 4px !important;
    width: 96px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-hub,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-origin-town-inline,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-destination-town-inline {
    flex: 0 1 225px !important;
    max-width: 260px !important;
    min-width: 180px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-hub,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-origin-town-inline,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-destination-town-inline {
    flex: 0 1 215px !important;
    max-width: 250px !important;
    min-width: 170px !important;
}

@media (max-width: 1200px) {
    body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid,
    body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid {
        grid-template-columns:
            minmax(128px, .78fr)
            minmax(124px, .68fr)
            148px
            minmax(270px, 300px)
            minmax(200px, 1fr) !important;
    }

    body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-range,
    body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-range {
        max-width: 300px !important;
        min-width: 270px !important;
    }

    body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-branch,
    body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch {
        min-width: 200px !important;
    }
}

/* Normal header history: compact the chips and prevent bottom clipping. */
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) #historyTabs {
    height: 38px !important;
    overflow: hidden !important;
    top: 4px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-shell .ff-topnav .ff-historybar-wrap #history-tabs-inner {
    height: 36px !important;
    overflow: visible !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs {
    align-items: center !important;
    gap: 2px !important;
    height: 36px !important;
    overflow: visible !important;
    padding: 3px 4px 0 !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page {
    flex: 0 1 auto !important;
    max-width: 132px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li > a {
    align-items: center !important;
    box-sizing: border-box !important;
    display: flex !important;
    height: 30px !important;
    line-height: 1 !important;
    max-height: 30px !important;
    min-height: 30px !important;
    padding: 0 8px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-action > a {
    min-width: 28px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--waybill,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--waybill > a {
    max-width: 170px !important;
}

/* Full capture rating final sizing: keep charge labels clear and give value columns breathing room. */
body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-col {
    flex: 0 0 540px !important;
    max-width: 540px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-section {
    flex: 0 0 286px !important;
    max-width: 286px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-vars-section {
    flex: 0 0 230px !important;
    max-width: 230px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-calc-col {
    flex: 0 0 440px !important;
    max-width: 440px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-fcalc-section {
    flex: 0 0 250px !important;
    max-width: 250px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-mass-section {
    flex: 0 0 172px !important;
    max-width: 172px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table {
    margin-left: 30px !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table {
    margin-left: 70px !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr > td:first-child,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection__table > tbody > tr > td:first-child {
    min-width: 92px !important;
    width: 92px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr > td:last-child,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection__table > tbody > tr > td:last-child {
    min-width: 104px !important;
    width: 104px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table .totalUL,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection__divider {
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed > tbody > tr > td:first-child {
    min-width: 126px !important;
    width: 126px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed > tbody > tr > td:last-child {
    min-width: 88px !important;
    width: 88px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-mass-section table.table-condensed > tbody > tr > td:first-child {
    min-width: 82px !important;
    width: 82px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-mass-section table.table-condensed > tbody > tr > td:last-child {
    min-width: 76px !important;
    width: 76px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-verified-inline {
    transform: translateX(-14px);
}

/* View Waybills filter sizing final pass: keep compact mode predictable at smaller widths. */
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid {
    column-gap: 8px !important;
    grid-template-columns: 184px 140px 144px 300px 230px !important;
    justify-content: start !important;
    row-gap: 3px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-period,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-period {
    max-width: 144px !important;
    min-width: 144px !important;
    width: 144px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-range,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-range {
    max-width: 300px !important;
    min-width: 300px !important;
    width: 300px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-branch,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch {
    flex: 0 0 230px !important;
    max-width: 230px !important;
    min-width: 230px !important;
    width: 230px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .ff-date-period-group,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-group,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-group {
    align-items: start !important;
    display: grid !important;
    grid-template-columns: 54px 88px !important;
    height: 24px !important;
    line-height: 24px !important;
    max-height: 24px !important;
    max-width: 142px !important;
    min-height: 24px !important;
    overflow: hidden !important;
    width: 142px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .ff-date-period-ignore,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-ignore,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-ignore {
    align-self: start !important;
    display: block !important;
    height: 24px !important;
    line-height: 24px !important;
    max-height: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    position: relative !important;
    width: 54px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label {
    display: block !important;
    font-size: 11px !important;
    height: 24px !important;
    line-height: 24px !important;
    margin: 0 !important;
    max-height: 24px !important;
    min-height: 24px !important;
    padding: 0 2px 0 19px !important;
    position: absolute !important;
    top: 0 !important;
    transform: none !important;
    width: 54px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before {
    height: 11px !important;
    left: 4px !important;
    top: 6px !important;
    transform: none !important;
    width: 11px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after {
    left: 7px !important;
    top: 9px !important;
    transform: rotate(-45deg) !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .ff-date-period-select,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-select,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-select {
    height: 24px !important;
    line-height: 22px !important;
    max-height: 24px !important;
    min-height: 24px !important;
    padding: 0 4px !important;
    width: 88px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-agent,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-agent {
    flex: 0 1 260px !important;
    max-width: 300px !important;
    min-width: 220px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-driver,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-driver {
    flex: 0 1 215px !important;
    max-width: 250px !important;
    min-width: 180px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-order,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-manifest-no,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-courier,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-order,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-manifest-no,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-courier {
    flex: 0 1 178px !important;
    max-width: 210px !important;
    min-width: 150px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-hub,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-origin-town-inline,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-destination-town-inline,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-hub,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-origin-town-inline,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-destination-town-inline {
    flex: 0 1 215px !important;
    max-width: 250px !important;
    min-width: 180px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-bool-group,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-bool-group {
    flex: 0 1 auto !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-bool-group .ff-filter-bool,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-bool-group .ff-filter-bool {
    flex: 0 1 72px !important;
    max-width: 84px !important;
    min-width: 64px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-bool-group .ff-filter-bool-wide,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-bool-group .ff-filter-security,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-bool-group .ff-filter-bool-wide,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-bool-group .ff-filter-security {
    flex: 0 1 88px !important;
    max-width: 102px !important;
    min-width: 76px !important;
}

@media (max-width: 1200px) {
    body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid,
    body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid {
        grid-template-columns: 160px 132px 142px 292px 220px !important;
    }

    body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-range,
    body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-range {
        max-width: 292px !important;
        min-width: 292px !important;
        width: 292px !important;
    }

    body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-branch,
    body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch {
        max-width: 220px !important;
        min-width: 220px !important;
        width: 220px !important;
    }
}

/* Full capture final top-row/rating balance. */
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-3:has(#client) {
    flex: 1.45 1 330px !important;
    max-width: 470px !important;
    min-width: 255px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs > .row > .col-md-3:has(#waybillNo) {
    flex: 0 1 190px !important;
    max-width: 198px !important;
    min-width: 165px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-courier-field {
    flex: 0 1 132px !important;
    max-width: 148px !important;
    min-width: 116px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-waybill-label-row {
    margin-bottom: 1px !important;
    min-height: 17px !important;
    padding-right: 82px !important;
    position: relative !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-verified-inline {
    margin: 0 !important;
    position: absolute !important;
    right: 0 !important;
    top: -5px !important;
    transform: translateX(-10px) !important;
    z-index: 2;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-full-waybill-label-row,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-full-capture .ff-full-waybill-label-row {
    margin-bottom: 0 !important;
    min-height: 12px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-full-verified-inline,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-full-capture .ff-full-verified-inline {
    top: -12px !important;
    transform: translateX(-12px) !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-col {
    flex: 0 0 552px !important;
    max-width: 552px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-section {
    flex: 0 0 286px !important;
    max-width: 286px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-vars-section {
    flex: 0 0 242px !important;
    max-width: 242px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-calc-col {
    flex: 0 0 452px !important;
    max-width: 452px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-mass-section {
    flex: 0 0 184px !important;
    max-width: 184px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed > tbody > tr > td:first-child {
    min-width: 132px !important;
    width: 132px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed > tbody > tr > td:last-child {
    min-width: 96px !important;
    padding-right: 4px !important;
    width: 96px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-mass-section table.table-condensed > tbody > tr > td:first-child {
    min-width: 86px !important;
    width: 86px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-mass-section table.table-condensed > tbody > tr > td:last-child {
    min-width: 82px !important;
    padding-right: 4px !important;
    width: 82px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table {
    margin-left: 54px !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection__title--client:not(.ng-hide) + .ff-charge-summary-table {
    margin-top: -16px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table {
    margin-top: 0 !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr > td:first-child,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection__table > tbody > tr > td:first-child {
    min-width: 92px !important;
    width: 92px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr > td:last-child,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection__table > tbody > tr > td:last-child {
    min-width: 104px !important;
    width: 104px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection--agent {
    padding-top: 1px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__divider,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table .totalUL {
    width: 100% !important;
}

/* View Waybills final compact corrections: prevent overflow, keep booleans on one line, and tighten pager chrome. */
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-bool-group .ff-filter-inline-row {
    gap: 3px 6px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-bool-group {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-bool-group .ff-filter-bool {
    flex: 0 1 64px !important;
    max-width: 72px !important;
    min-width: 58px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-bool-group .ff-filter-bool-wide,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-bool-group .ff-filter-security {
    flex: 0 1 78px !important;
    max-width: 88px !important;
    min-width: 68px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-bool-group select.form-control {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .ff-date-period-select,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-select,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-select {
    line-height: 18px !important;
    padding-top: 0 !important;
    padding-bottom: 4px !important;
}

@media (max-width: 1050px) {
    body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid,
    body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        width: 100% !important;
    }

    body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-range,
    body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-range,
    body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-branch,
    body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch {
        max-width: 100% !important;
        min-width: 0 !important;
        width: auto !important;
    }

    body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ff-filter-date-range .range-picker,
    body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid .ff-filter-date-range .range-picker {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (max-width: 850px) {
    body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid,
    body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-total-footer,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-total-footer .dx-datagrid-content {
    margin: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-total-footer .dx-row > td {
    height: 20px !important;
    line-height: 18px !important;
    min-height: 20px !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager,
body.ff-app .ff-view-waybills #gridContainer .dx-pager {
    align-items: center !important;
    border-top: 0 !important;
    display: flex !important;
    margin: 0 !important;
    min-height: 22px !important;
    padding: 0 4px !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-page-sizes,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-pages,
body.ff-app .ff-view-waybills #gridContainer .dx-pager .dx-page-sizes,
body.ff-app .ff-view-waybills #gridContainer .dx-pager .dx-pages {
    align-items: center !important;
    display: inline-flex !important;
    height: 22px !important;
    line-height: 20px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-info,
body.ff-app .ff-view-waybills #gridContainer .dx-pager .dx-info {
    line-height: 20px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-page,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-page-size,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-navigate-button,
body.ff-app .ff-view-waybills #gridContainer .dx-pager .dx-page,
body.ff-app .ff-view-waybills #gridContainer .dx-pager .dx-page-size,
body.ff-app .ff-view-waybills #gridContainer .dx-pager .dx-navigate-button {
    line-height: 18px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    min-height: 20px !important;
    padding-bottom: 1px !important;
    padding-top: 1px !important;
}

/* Full capture rating final balance: widen rating variables and keep agent charges aligned to client charges. */
body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-col {
    flex: 0 0 580px !important;
    max-width: 580px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-section {
    flex: 0 0 292px !important;
    max-width: 292px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-vars-section {
    flex: 0 0 264px !important;
    max-width: 264px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed {
    table-layout: fixed !important;
    width: 250px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed > tbody > tr > td:first-child {
    min-width: 136px !important;
    width: 136px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed > tbody > tr > td:last-child {
    min-width: 108px !important;
    padding-right: 8px !important;
    width: 108px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table {
    border-collapse: collapse !important;
    margin-left: 54px !important;
    table-layout: fixed !important;
    width: 216px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr > td:first-child,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table > tbody > tr > td:first-child {
    box-sizing: border-box !important;
    min-width: 96px !important;
    padding-left: 0 !important;
    padding-right: 4px !important;
    width: 96px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr > td:last-child,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table > tbody > tr > td:last-child {
    box-sizing: border-box !important;
    min-width: 110px !important;
    padding-left: 4px !important;
    padding-right: 0 !important;
    width: 110px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table .totalUL,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__divider {
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__divider-row > td {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* View Waybills filter overflow guard: wrap date/branch before the fieldset edge and keep destination with route/service. */
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid {
    column-gap: 8px !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)) !important;
    max-width: 100% !important;
    overflow: visible !important;
    row-gap: 3px !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-range,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-range {
    grid-column: span 2 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ff-filter-date-range .range-picker,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid .ff-filter-date-range .range-picker {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-branch,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch {
    max-width: 100% !important;
    min-width: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-destination-town-inline {
    flex: 0 1 230px !important;
    max-width: 260px !important;
    min-width: 175px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-destination-town-inline {
    flex: 0 1 215px !important;
    max-width: 250px !important;
    min-width: 170px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-route,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-service {
    flex: 0 1 220px !important;
    max-width: 260px !important;
    min-width: 170px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-route,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-service {
    flex: 0 1 205px !important;
    max-width: 240px !important;
    min-width: 160px !important;
}

/* View Waybills top filter guard: branch/date need a two-slot footprint so they wrap before clipping. */
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid {
    box-sizing: border-box !important;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    padding-right: 12px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-range,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-range,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-branch,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch {
    grid-column: span 2 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-branch .ui-select-container,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch .ui-select-container,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-branch .ui-select-match > .btn,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch .ui-select-match > .btn {
    max-width: 100% !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-select,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .ff-date-period-select,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-select,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-select {
    line-height: calc(var(--ff-control-h) - 2px) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    vertical-align: top !important;
}

/* Full capture rating: remove leftover space between Rating Variables and Freight Calculation. */
body.ff-app .ff-waybill.ff-full-capture .ff-rating-compact-row,
body.ff-app .ff-waybill.ff-full-capture .ff-rating-split-row {
    column-gap: 6px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-col {
    flex: 0 0 562px !important;
    max-width: 562px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-calc-col {
    margin-left: 0 !important;
}

/* View Waybills filter/footer final layout: keep related top fields together and avoid orphan controls. */
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px 8px !important;
    padding-right: 8px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > [class*="col-"],
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > [class*="col-"] {
    float: none !important;
    grid-column: auto !important;
    min-width: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-id {
    flex: 0 1 385px !important;
    max-width: 385px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-type {
    flex: 0 1 385px !important;
    max-width: 385px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-period {
    flex: 0 1 230px !important;
    max-width: 230px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-range {
    flex: 0 1 405px !important;
    max-width: 405px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-branch {
    flex: 0 1 385px !important;
    max-width: 385px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-id {
    flex-basis: 330px !important;
    max-width: 385px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-type {
    flex-basis: 305px !important;
    max-width: 385px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-period {
    flex-basis: 160px !important;
    max-width: 180px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-range {
    flex-basis: 340px !important;
    max-width: 405px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch {
    flex-basis: 330px !important;
    max-width: 385px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-branch .ui-select-container,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch .ui-select-container,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-branch .ui-select-match > .btn,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch .ui-select-match > .btn,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ff-filter-date-range .range-picker,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid .ff-filter-date-range .range-picker {
    max-width: 100% !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-order,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-order {
    flex: 0 1 185px !important;
    max-width: 230px !important;
    min-width: 150px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-origin-town-inline,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-destination-town-inline,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-origin-town-inline,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-destination-town-inline {
    flex: 0 1 225px !important;
    max-width: 260px !important;
    min-width: 170px !important;
}

body.ff-app .ff-view-waybills > .container-fullw,
body.ff-app .ff-view-waybills .ff-view-waybills-grid-row,
body.ff-app .ff-view-waybills #gridContainer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager,
body.ff-app .ff-view-waybills #gridContainer .dx-pager {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* View Waybills final flow: let filter fields continue across previous row boundaries. */
body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px 8px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-sr-legend {
    flex: 0 0 100% !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-waybill-filter-grid,
body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-filter-client-row,
body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-filter-manifest-row,
body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-filter-waybill-route-row {
    display: contents !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > [class*="col-"],
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > [class*="col-"],
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > [class*="col-"],
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > [class*="col-"] {
    float: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-id {
    flex: 0 1 315px !important;
    max-width: 370px !important;
    min-width: 245px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-type {
    flex: 0 1 305px !important;
    max-width: 360px !important;
    min-width: 230px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-period {
    flex: 0 1 155px !important;
    max-width: 170px !important;
    min-width: 145px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-range {
    flex: 0 1 315px !important;
    max-width: 340px !important;
    min-width: 285px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-branch {
    flex: 0 1 240px !important;
    max-width: 275px !important;
    min-width: 190px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-client {
    flex: 1 1 310px !important;
    max-width: 410px !important;
    min-width: 250px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-agent {
    flex: 0 1 245px !important;
    max-width: 285px !important;
    min-width: 195px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-driver {
    flex: 0 1 245px !important;
    max-width: 290px !important;
    min-width: 195px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-vehicle {
    flex: 0 1 220px !important;
    max-width: 250px !important;
    min-width: 170px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-order {
    flex: 0 1 180px !important;
    max-width: 210px !important;
    min-width: 140px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-schedule {
    flex: 0 1 235px !important;
    max-width: 270px !important;
    min-width: 175px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-invoice,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-manifest-no,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-courier {
    flex: 0 1 175px !important;
    max-width: 205px !important;
    min-width: 132px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-internal-id {
    flex: 0 1 110px !important;
    max-width: 125px !important;
    min-width: 86px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-origin-hub,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-destination-hub {
    flex: 0 1 215px !important;
    max-width: 250px !important;
    min-width: 170px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-town,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-party {
    flex: 1 1 245px !important;
    max-width: 310px !important;
    min-width: 190px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-route,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-service,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-box,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-capture-method,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-user {
    flex: 0 1 190px !important;
    max-width: 230px !important;
    min-width: 150px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-pc-kgs-group {
    flex: 0 1 455px !important;
    max-width: 520px !important;
    min-width: 360px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-parcel-desc {
    flex: 0 1 180px !important;
    max-width: 220px !important;
    min-width: 135px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-receiver-acc,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-ring-code {
    flex: 0 1 125px !important;
    max-width: 150px !important;
    min-width: 100px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-area {
    flex: 0 1 170px !important;
    max-width: 205px !important;
    min-width: 130px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-zone {
    flex: 0 1 80px !important;
    max-width: 94px !important;
    min-width: 58px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-bool-group {
    flex: 1 1 560px !important;
    max-width: none !important;
    min-width: 360px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-filter-actions-slot--bottom {
    flex: 1 1 100% !important;
    margin-top: 2px !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-id {
    flex-basis: 285px !important;
    max-width: 340px !important;
    min-width: 215px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-type {
    flex-basis: 265px !important;
    max-width: 320px !important;
    min-width: 205px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-range {
    flex-basis: 300px !important;
    max-width: 325px !important;
    min-width: 275px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch {
    flex-basis: 225px !important;
    max-width: 260px !important;
    min-width: 180px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-order {
    flex-basis: 165px !important;
    max-width: 195px !important;
    min-width: 128px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-origin-hub,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-destination-hub {
    flex-basis: 200px !important;
    max-width: 235px !important;
    min-width: 160px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-bool-group {
    flex-basis: 520px !important;
    min-width: 330px !important;
}

body.ff-app .ff-view-waybills > .container-fullw,
body.ff-app .ff-view-waybills .ff-view-waybills-grid-row,
body.ff-app .ff-view-waybills .ff-view-waybills-grid-row > .col-md-12,
body.ff-app .ff-view-waybills #gridContainer,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-rowsview,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-total-footer,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager,
body.ff-app .ff-view-waybills #gridContainer .dx-pager {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager,
body.ff-app .ff-view-waybills #gridContainer .dx-pager {
    min-height: 26px !important;
    padding-top: 0 !important;
}

/* View Waybills final pass: keep flattened filter rows flowing and remove footer slack. */
body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-waybill-filter-grid::before,
body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-waybill-filter-grid::after,
body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-filter-client-row::before,
body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-filter-client-row::after,
body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-filter-manifest-row::before,
body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-filter-manifest-row::after,
body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-filter-waybill-route-row::before,
body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-filter-waybill-route-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-acc {
    flex: 0 1 145px !important;
    max-width: 170px !important;
    min-width: 115px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-town,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-party {
    flex: 0 1 240px !important;
    max-width: 285px !important;
    min-width: 175px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-destination-hub {
    flex-grow: 0 !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-order {
    flex-grow: 0 !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-user {
    flex-grow: 0 !important;
}

body.ff-app .ff-view-waybills > .container-fluid.container-fullw,
body.ff-app .ff-view-waybills > .container-fullw,
body.ff-app .ff-view-waybills .ff-view-waybills-grid-row,
body.ff-app .ff-view-waybills .ff-view-waybills-grid-row > .col-md-12 {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-rowsview,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-total-footer,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager,
body.ff-app .ff-view-waybills #gridContainer .dx-pager {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager,
body.ff-app .ff-view-waybills #gridContainer .dx-pager {
    align-items: center !important;
    min-height: 22px !important;
}

body.ff-app .ff-view-waybills.ff-view-waybills-compact #gridContainer .dx-datagrid-headers .dx-header-row > td {
    height: 24px !important;
    min-height: 24px !important;
    padding-bottom: 2px !important;
    padding-top: 2px !important;
}

body.ff-app .ff-view-waybills.ff-view-waybills-compact #gridContainer .dx-datagrid-headers .dx-checkbox,
body.ff-app .ff-view-waybills.ff-view-waybills-compact #gridContainer .dx-datagrid-headers .dx-checkbox-container {
    height: 16px !important;
    min-height: 16px !important;
}

/* Full capture tablet-fit pass: let rating and parcel areas shrink/wrap before controls leave the viewport. */
body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-col,
body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-col > .ff-rating-split-row {
    display: contents !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-section {
    flex: 0 1 292px !important;
    max-width: 292px !important;
    min-width: 270px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-vars-section {
    flex: 0 1 276px !important;
    max-width: 276px !important;
    min-width: 260px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed {
    width: 260px !important;
}

body.ff-app .ff-waybill.ff-full-capture table.custom-dx-table.ff-parcel-grid {
    min-width: 960px !important;
}

body.ff-app .ff-waybill.ff-full-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-pieces {
    width: 64px !important;
}

body.ff-app .ff-waybill.ff-full-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-qty {
    width: 54px !important;
}

body.ff-app .ff-waybill.ff-full-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-code {
    width: 96px !important;
}

body.ff-app .ff-waybill.ff-full-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-desc {
    width: clamp(168px, 18vw, 280px) !important;
}

body.ff-app .ff-waybill.ff-full-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-dim {
    width: 84px !important;
}

body.ff-app .ff-waybill.ff-full-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-volume,
body.ff-app .ff-waybill.ff-full-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-mass {
    width: 88px !important;
}

body.ff-app .ff-waybill.ff-full-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-value {
    width: 98px !important;
}

body.ff-app .ff-waybill.ff-full-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-action {
    width: 38px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-clone-action {
    flex: 0 0 62px !important;
    max-width: 62px !important;
    min-width: 58px !important;
    padding-top: 18px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-full-clone-action,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-full-capture .ff-full-clone-action {
    padding-top: 13px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-clone-action .btn {
    min-width: 54px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    width: 54px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill.ff-full-capture .ff-additional-details .ff-additional-meta-row {
    margin-bottom: 1px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill.ff-full-capture .ff-additional-details > .row.margin-bottom-20 {
    margin-bottom: 1px !important;
    min-height: 0 !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill.ff-full-capture .ff-additional-details .ff-pod-details {
    margin-top: 0 !important;
}

/* View Waybills final grid chrome: keep export buttons from overlaying quick filters on narrower screens. */
body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row {
    padding-right: 320px !important;
}

body.ff-app .ff-view-waybills .ff-grid-view-toolbar {
    align-items: center !important;
    display: inline-flex !important;
    gap: 3px !important;
    margin-right: 4px !important;
    max-width: 100% !important;
    min-height: 24px !important;
    vertical-align: middle !important;
}

body.ff-app .ff-view-waybills .ff-grid-view-caption {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-view-waybills .ff-grid-view-select {
    border-color: var(--border) !important;
    box-shadow: none !important;
    display: inline-block !important;
    font-size: 13px !important;
    height: 24px !important;
    line-height: 20px !important;
    max-width: 105px !important;
    min-width: 82px !important;
    padding: 1px 22px 1px 7px !important;
    width: 92px !important;
}

body.ff-app.ff-grid-density-compact .ff-view-waybills .ff-grid-view-select,
body.ff-app[data-grid-density="compact"] .ff-view-waybills .ff-grid-view-select {
    max-width: 100px !important;
    min-width: 80px !important;
    width: 90px !important;
}

body.ff-app .ff-view-waybills .ff-grid-view-icon-btn {
    align-items: center !important;
    display: inline-flex !important;
    height: 24px !important;
    justify-content: center !important;
    min-height: 24px !important;
    min-width: 26px !important;
    padding: 1px 6px !important;
}

body.ff-app .ff-view-waybills .ff-grid-view-icon-btn .fa {
    font-size: 13px !important;
    line-height: 1 !important;
}

body.ff-app .ff-view-waybills .ff-grid-view-menu {
    display: inline-flex !important;
}

body.ff-app .ff-view-waybills .ff-grid-view-menu .dropdown-menu {
    font-size: 13px !important;
    min-width: 170px !important;
}

body.ff-app .ff-view-waybills .ff-grid-view-dirty {
    color: var(--error) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    margin-left: 1px !important;
}

@media (max-width: 3000px) {
    body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row {
        padding-right: 0 !important;
    }

    body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-header-panel {
        margin-top: 0 !important;
        min-height: 26px !important;
        pointer-events: none;
    }

    body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-header-panel .dx-toolbar,
    body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-header-panel .dx-toolbar-items-container {
        min-height: 26px !important;
        height: 26px !important;
    }

    body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-header-panel .dx-toolbar-after {
        align-items: center !important;
        display: flex !important;
        justify-content: flex-end !important;
        width: 100% !important;
    }

    body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-header-panel .dx-toolbar-item {
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }
}

/* View Waybills pager: trim the leftover empty band below page options. */
body.ff-app .ff-view-waybills .ff-view-waybills-grid-row,
body.ff-app .ff-view-waybills .ff-view-waybills-grid-row > .col-md-12,
body.ff-app .ff-view-waybills #gridContainer,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid .dx-datagrid-pager,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid .dx-pager,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid .dx-datagrid-bottom-load-panel {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid .dx-datagrid-pager,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid .dx-pager {
    border-bottom: 0 !important;
    box-sizing: border-box !important;
    height: 26px !important;
    max-height: 26px !important;
    min-height: 20px !important;
    overflow: visible !important;
    padding: 0 4px !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid .dx-datagrid-pager .dx-page-sizes,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid .dx-datagrid-pager .dx-pages,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid .dx-pager .dx-page-sizes,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid .dx-pager .dx-pages {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Multi-page capture/generate density: reuse the accepted full-capture rhythm without touching full capture itself. */
body.ff-app .ff-capture-page > .container-fullw,
body.ff-app .ff-capture-page > .container-fluid.container-fullw {
    padding: 4px 10px 8px !important;
}

body.ff-app .ff-capture-page fieldset {
    margin-bottom: 4px !important;
    padding: 6px 10px 8px !important;
}

body.ff-app:not([data-theme="dark"]) .ff-capture-page fieldset:not(.ff-legend--main) {
    background: var(--surface-2) !important;
}

body.ff-app .ff-capture-page fieldset > legend {
    line-height: 1.1 !important;
    margin-bottom: 3px !important;
    padding: 2px 8px !important;
}

body.ff-app .ff-capture-page .row {
    margin-bottom: 3px !important;
}

body.ff-app .ff-capture-page .form-group {
    margin-bottom: 2px !important;
}

body.ff-app .ff-capture-page .form-group > label,
body.ff-app .ff-capture-page label.control-label,
body.ff-app .ff-capture-page .dx-field-label {
    line-height: 1.15 !important;
    margin-bottom: 1px !important;
    min-height: 0 !important;
}

body.ff-app .ff-capture-page .form-control,
body.ff-app .ff-capture-page .ff-control,
body.ff-app .ff-capture-page .ui-select-container,
body.ff-app .ff-capture-page .ui-select-container .ui-select-match,
body.ff-app .ff-capture-page .ui-select-container .btn.form-control,
body.ff-app .ff-capture-page .ui-select-container .ui-select-toggle {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-capture-page textarea.form-control,
body.ff-app .ff-capture-page textarea.ff-control {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    resize: vertical;
}

body.ff-app[data-grid-density="compact"] .ff-capture-page,
body.ff-app.ff-grid-density-compact .ff-capture-page {
    --ff-control-h: 28px;
}

body.ff-app[data-grid-density="compact"] .ff-capture-page fieldset,
body.ff-app.ff-grid-density-compact .ff-capture-page fieldset {
    margin-bottom: 3px !important;
    padding: 4px 8px 6px !important;
}

body.ff-app[data-grid-density="compact"] .ff-capture-page .row,
body.ff-app.ff-grid-density-compact .ff-capture-page .row {
    margin-bottom: 2px !important;
}

body.ff-app[data-grid-density="compact"] .ff-capture-page .form-group,
body.ff-app.ff-grid-density-compact .ff-capture-page .form-group {
    margin-bottom: 1px !important;
}

body.ff-app[data-grid-density="compact"] .ff-capture-page .form-group > label,
body.ff-app[data-grid-density="compact"] .ff-capture-page label.control-label,
body.ff-app.ff-grid-density-compact .ff-capture-page .form-group > label,
body.ff-app.ff-grid-density-compact .ff-capture-page label.control-label {
    font-size: 11px !important;
    line-height: 12px !important;
}

body.ff-app .ff-capture-page .padding-top-30,
body.ff-app .ff-capture-page .padding-top-25,
body.ff-app .ff-capture-page .padding-top-20 {
    padding-top: 4px !important;
}

body.ff-app[data-grid-density="compact"] .ff-capture-page .padding-top-30,
body.ff-app[data-grid-density="compact"] .ff-capture-page .padding-top-25,
body.ff-app[data-grid-density="compact"] .ff-capture-page .padding-top-20,
body.ff-app.ff-grid-density-compact .ff-capture-page .padding-top-30,
body.ff-app.ff-grid-density-compact .ff-capture-page .padding-top-25,
body.ff-app.ff-grid-density-compact .ff-capture-page .padding-top-20 {
    padding-top: 2px !important;
}

/* Shared capture-page control alignment.
   Keep list widgets on the same top baseline as normal text/date fields.
   Full Waybill Capture does not use ff-capture-page and keeps its page-specific accepted layout. */
body.ff-app .ff-capture-page:not(.ff-full-capture) .form-group,
body.ff-app .ff-capture-page:not(.ff-full-capture) .dx-field {
    align-items: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    margin-bottom: 2px !important;
    min-width: 0 !important;
}

body.ff-app .ff-capture-page:not(.ff-full-capture) .form-group > label,
body.ff-app .ff-capture-page:not(.ff-full-capture) .form-group > label.width100,
body.ff-app .ff-capture-page:not(.ff-full-capture) .control-label,
body.ff-app .ff-capture-page:not(.ff-full-capture) .dx-field-label {
    align-items: center !important;
    display: flex !important;
    flex: 0 0 auto !important;
    line-height: 14px !important;
    margin: 0 0 1px !important;
    min-height: 14px !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

body.ff-app .ff-capture-page:not(.ff-full-capture) .form-group > label .pull-right,
body.ff-app .ff-capture-page:not(.ff-full-capture) .form-group > label .text-primary.pull-right,
body.ff-app .ff-capture-page:not(.ff-full-capture) .form-group > label [json-dbl],
body.ff-app .ff-capture-page:not(.ff-full-capture) .control-label .pull-right {
    align-self: center !important;
    float: none !important;
    line-height: 1 !important;
    margin-left: auto !important;
    margin-top: 0 !important;
}

body.ff-app .ff-capture-page:not(.ff-full-capture) .form-group > label .symbol.required,
body.ff-app .ff-capture-page:not(.ff-full-capture) .control-label .symbol.required {
    align-self: center !important;
    margin-top: 0 !important;
}

body.ff-app .ff-capture-page:not(.ff-full-capture) .form-control,
body.ff-app .ff-capture-page:not(.ff-full-capture) .ff-control,
body.ff-app .ff-capture-page:not(.ff-full-capture) .ff-ui.ui-select-bootstrap,
body.ff-app .ff-capture-page:not(.ff-full-capture) .ui-select-container,
body.ff-app .ff-capture-page:not(.ff-full-capture) .ui-select-bootstrap,
body.ff-app .ff-capture-page:not(.ff-full-capture) .ui-select-bootstrap > .ui-select-match,
body.ff-app .ff-capture-page:not(.ff-full-capture) .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-capture-page:not(.ff-full-capture) .ui-select-bootstrap > .ui-select-match > .ui-select-toggle,
body.ff-app .ff-capture-page:not(.ff-full-capture) .select2-container,
body.ff-app .ff-capture-page:not(.ff-full-capture) .select2-choice,
body.ff-app .ff-capture-page:not(.ff-full-capture) .ff-dx,
body.ff-app .ff-capture-page:not(.ff-full-capture) .dx-widget,
body.ff-app .ff-capture-page:not(.ff-full-capture) .dx-texteditor,
body.ff-app .ff-capture-page:not(.ff-full-capture) .dx-texteditor-container {
    box-sizing: border-box !important;
    height: var(--ff-control-h) !important;
    margin-top: 0 !important;
    max-height: var(--ff-control-h) !important;
    max-width: 100% !important;
    min-height: var(--ff-control-h) !important;
    min-width: 0 !important;
    vertical-align: top !important;
    width: 100% !important;
}

body.ff-app .ff-capture-page:not(.ff-full-capture) .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-capture-page:not(.ff-full-capture) .ui-select-bootstrap > .ui-select-match > .ui-select-toggle {
    align-items: center !important;
    display: flex !important;
    justify-content: space-between !important;
    line-height: 1.15 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-capture-page:not(.ff-full-capture) .ui-select-bootstrap .ui-select-search,
body.ff-app .ff-capture-page:not(.ff-full-capture) .dx-texteditor-input {
    height: calc(var(--ff-control-h) - 2px) !important;
    line-height: 1.15 !important;
    max-height: calc(var(--ff-control-h) - 2px) !important;
    min-height: calc(var(--ff-control-h) - 2px) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-capture-page:not(.ff-full-capture) .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-capture-page:not(.ff-full-capture) .ui-select-bootstrap .ui-select-placeholder {
    display: block !important;
    flex: 1 1 auto !important;
    line-height: 1.15 !important;
    max-height: calc(var(--ff-control-h) - 4px) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app .ff-capture-page:not(.ff-full-capture) .ui-select-bootstrap .ui-select-placeholder.ng-hide,
body.ff-app .ff-capture-page:not(.ff-full-capture) .ui-select-bootstrap .ui-select-placeholder[aria-hidden="true"] {
    display: none !important;
    flex: 0 0 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    width: 0 !important;
}

body.ff-app .ff-capture-page .ui-select-container.ff-capture-ui-select-keyboard-focus {
    outline: none !important;
}

body.ff-app .ff-capture-page .ui-select-container.ff-capture-ui-select-keyboard-focus > .ui-select-match > .btn,
body.ff-app .ff-capture-page .ui-select-container.ff-capture-ui-select-keyboard-focus > .ui-select-match > .ui-select-toggle {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px var(--focus) !important;
    outline: none !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row .ui-select-bootstrap .ui-select-placeholder {
    display: inline-block !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    min-width: 60px !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row .ui-select-bootstrap .ui-select-placeholder:empty,
body.ff-app .ff-waybill.ff-full-capture .ui-select-bootstrap .ui-select-placeholder:empty {
    display: none !important;
    flex: 0 0 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    width: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-label {
    align-items: center !important;
    display: flex !important;
    gap: 6px !important;
    justify-content: space-between !important;
    line-height: 18px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-quick-town-label {
    align-items: center !important;
    display: flex !important;
    gap: 6px !important;
    justify-content: space-between !important;
    line-height: 18px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-label-actions {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    gap: 5px !important;
    margin-left: auto !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-quick-town-label-actions {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    gap: 5px !important;
    margin-left: auto !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-lock {
    border-radius: 4px !important;
    height: 20px !important;
    min-height: 20px !important;
    min-width: 20px !important;
    width: 20px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-quick-town-lock {
    border-radius: 4px !important;
    height: 20px !important;
    min-height: 20px !important;
    min-width: 20px !important;
    width: 20px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-lock:not(.is-locked) {
    background: color-mix(in srgb, transparent 92%, var(--primary)) !important;
    border-color: color-mix(in srgb, var(--border) 62%, var(--primary)) !important;
    color: var(--primary) !important;
    opacity: 1 !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-quick-town-lock:not(.is-locked) {
    background: color-mix(in srgb, transparent 92%, var(--primary)) !important;
    border-color: color-mix(in srgb, var(--border) 62%, var(--primary)) !important;
    color: var(--primary) !important;
    opacity: 1 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-lock.is-locked {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
    opacity: 1 !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-quick-town-lock.is-locked {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
    opacity: 1 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-lock i {
    font-size: 11px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-quick-town-lock i {
    font-size: 11px !important;
}

/* Quick Capture final alignment: keep client, sender/receiver and town rows on the same left edge. */
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 8px !important;
    margin: 0 0 2px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > [class*="col-"] {
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row > .acc-field-col {
    flex: 0 1 135px !important;
    max-width: 155px !important;
    min-width: 115px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row > .ff-quick-client-field {
    flex: 1 1 310px !important;
    min-width: 235px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row > .ff-quick-ref-field {
    flex: 1.25 1 360px !important;
    min-width: 260px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .ff-quick-sender-name-wrap,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .ff-quick-receiver-name-wrap,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 330px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-name-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 > .row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 5px !important;
    margin: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-name-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-name-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 > .row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 > .row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-name-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 > .row > [class*="col-"] {
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-name-cell,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 > .row > .col-md-12 {
    flex: 1 1 auto !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-switch-cell {
    align-self: flex-start !important;
    flex: 0 0 30px !important;
    max-width: 30px !important;
    min-width: 30px !important;
    padding-top: 15px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-cell {
    flex: 1 1 auto !important;
    min-width: 150px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-bill-receiver-cell {
    align-self: flex-start !important;
    flex: 0 0 104px !important;
    max-width: 108px !important;
    min-width: 98px !important;
    padding-top: 15px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row > .col-md-12 {
    flex: 1 1 100% !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row .ff-quick-sender-options {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1px 12px !important;
    margin: 0 !important;
    min-height: 18px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row .checkbox {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    min-height: 17px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture .ff-quick-receiver-switch-cell,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture .ff-quick-bill-receiver-cell {
    padding-top: 12px !important;
}

body.ff-app .ff-capture-page:not(.ff-full-capture) .dx-field-label,
body.ff-app .ff-capture-page:not(.ff-full-capture) .dx-field-value {
    float: none !important;
    width: 100% !important;
}

body.ff-app[data-grid-density="compact"] .ff-capture-page:not(.ff-full-capture) .form-group > label,
body.ff-app[data-grid-density="compact"] .ff-capture-page:not(.ff-full-capture) .form-group > label.width100,
body.ff-app[data-grid-density="compact"] .ff-capture-page:not(.ff-full-capture) .control-label,
body.ff-app[data-grid-density="compact"] .ff-capture-page:not(.ff-full-capture) .dx-field-label,
body.ff-app.ff-grid-density-compact .ff-capture-page:not(.ff-full-capture) .form-group > label,
body.ff-app.ff-grid-density-compact .ff-capture-page:not(.ff-full-capture) .form-group > label.width100,
body.ff-app.ff-grid-density-compact .ff-capture-page:not(.ff-full-capture) .control-label,
body.ff-app.ff-grid-density-compact .ff-capture-page:not(.ff-full-capture) .dx-field-label {
    line-height: 12px !important;
    margin-bottom: 0 !important;
    min-height: 12px !important;
}

body.ff-app .ff-capture-page:not(.ff-full-capture) label:has(.symbol.required) {
    align-items: center !important;
    display: flex !important;
    gap: 2px !important;
    line-height: 14px !important;
    min-height: 14px !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

body.ff-app .ff-capture-page:not(.ff-full-capture) label:has(.symbol.required) .symbol.required {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    height: 14px !important;
    line-height: 14px !important;
    margin-left: 1px !important;
    margin-top: 0 !important;
    min-height: 14px !important;
    vertical-align: middle !important;
}

body.ff-app .ff-capture-page:not(.ff-full-capture) label:has(.symbol.required) .symbol.required::before {
    align-items: center !important;
    display: inline-flex !important;
    font-size: 18px !important;
    height: 14px !important;
    line-height: 14px !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
}

body.ff-app .ff-capture-page:not(.ff-full-capture) label:has(.symbol.required) .pull-right {
    margin-left: auto !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-capture-page:not(.ff-full-capture) label:has(.symbol.required),
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-capture-page:not(.ff-full-capture) label:has(.symbol.required) .symbol.required,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-capture-page:not(.ff-full-capture) label:has(.symbol.required) .symbol.required::before {
    height: 12px !important;
    line-height: 12px !important;
    min-height: 12px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-capture-page:not(.ff-full-capture) label:has(.symbol.required) .symbol.required::before {
    font-size: 16px !important;
}

/* Quick Capture sender/receiver controls: keep action checkboxes tight and move the switch beside Receiver. */
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .col-md-6,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .col-md-6 > .row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 3px 6px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .col-md-6 {
    flex: 1 1 460px !important;
    min-width: 340px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .col-md-6 > .row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .col-md-6 > .row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .col-md-6 > .row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-row > [class*="col-"] {
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .col-md-6:first-child > .row > .col-md-8 {
    flex: 1 1 260px !important;
    min-width: 225px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .col-md-6:first-child > .row > .col-md-4 {
    flex: 0 0 136px !important;
    max-width: 142px !important;
    min-width: 128px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-options {
    gap: 1px !important;
    margin-bottom: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-options .checkbox {
    display: block !important;
    line-height: 17px !important;
    margin: 0 !important;
    min-height: 17px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-options .checkbox label,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-bill-receiver label {
    line-height: 17px !important;
    min-height: 17px !important;
    padding-left: 22px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill.ff-quick-capture #showSender + label:before,
body.ff-app .ff-waybill.ff-quick-capture #retainSender + label:before,
body.ff-app .ff-waybill.ff-quick-capture #showAdditionalDetails + label:before,
body.ff-app .ff-waybill.ff-quick-capture #BillRec + label:before {
    top: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture #showSender + label:after,
body.ff-app .ff-waybill.ff-quick-capture #retainSender + label:after,
body.ff-app .ff-waybill.ff-quick-capture #showAdditionalDetails + label:after,
body.ff-app .ff-waybill.ff-quick-capture #BillRec + label:after {
    top: 2px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-switch-cell {
    flex: 0 0 32px !important;
    max-width: 32px !important;
    min-width: 30px !important;
    padding-top: 16px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-cell {
    flex: 1 1 210px !important;
    min-width: 170px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-bill-receiver-cell {
    align-self: flex-start !important;
    display: flex !important;
    flex: 0 0 104px !important;
    max-width: 108px !important;
    min-width: 98px !important;
    padding-top: 16px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-switch-cell .ff-sr-switch {
    height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    transform: none !important;
    width: 30px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-bill-receiver {
    align-items: center !important;
    display: inline-flex !important;
    height: var(--ff-control-h) !important;
    margin: 0 !important;
    min-height: var(--ff-control-h) !important;
    padding-top: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture .ff-quick-receiver-switch-cell,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture .ff-quick-bill-receiver-cell {
    padding-top: 12px !important;
}

/* Quick Capture Other Details: remove the spare vertical padding around the two controls. */
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-details {
    margin-top: 2px !important;
    padding-bottom: 5px !important;
    padding-top: 5px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-details > legend {
    margin-bottom: 3px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-row {
    align-items: flex-start !important;
    gap: 2px 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-col {
    flex: 1 1 330px !important;
    min-width: 260px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-col > .row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-col > .row > [class*="col-"] {
    margin: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-col .padding-left-20 {
    padding-left: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-details .form-group > label {
    margin-bottom: 1px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-details .ff-quick-service-lock-label {
    line-height: 18px !important;
    margin-bottom: 1px !important;
    min-height: 18px !important;
    padding-right: 0 !important;
    position: relative !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-details .ff-quick-service-lock {
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    right: 58px !important;
    top: -8px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-details .ff-quick-service-lock i {
    line-height: 1 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture .ff-quick-other-details {
    margin-top: 1px !important;
    padding-bottom: 4px !important;
    padding-top: 4px !important;
}

/* Quick Capture last-pass field row overrides, placed after older quick rules so these widths win. */
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 8px !important;
    margin: 0 0 2px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > [class*="col-"] {
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row > .acc-field-col {
    flex: 0 1 135px !important;
    max-width: 155px !important;
    min-width: 115px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row > .ff-quick-client-field {
    flex: 1 1 310px !important;
    min-width: 235px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row > .ff-quick-ref-field {
    flex: 1.25 1 360px !important;
    min-width: 260px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .ff-quick-sender-name-wrap,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .ff-quick-receiver-name-wrap,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 330px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-name-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 > .row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 5px !important;
    margin: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-name-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-name-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 > .row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 > .row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-name-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 > .row > [class*="col-"] {
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-name-cell,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 > .row > .col-md-12 {
    flex: 1 1 auto !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-switch-cell {
    align-self: flex-start !important;
    flex: 0 0 30px !important;
    max-width: 30px !important;
    min-width: 30px !important;
    padding-top: 15px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-cell {
    flex: 1 1 auto !important;
    min-width: 150px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-bill-receiver-cell {
    align-self: flex-start !important;
    display: flex !important;
    flex: 0 0 104px !important;
    max-width: 108px !important;
    min-width: 98px !important;
    padding-top: 15px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row > .col-md-12 {
    flex: 1 1 100% !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row .ff-quick-sender-options {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1px 12px !important;
    margin: 0 !important;
    min-height: 18px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row .checkbox {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    min-height: 17px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture .ff-quick-receiver-switch-cell,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture .ff-quick-bill-receiver-cell {
    padding-top: 12px !important;
}

/* Quick Capture: top-row settings and wider sender/receiver lookups. */
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row {
    align-items: flex-start !important;
    gap: 2px 10px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row > .ff-quick-waybill-field {
    flex: 1 1 300px !important;
    max-width: 420px !important;
    min-width: 250px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row > .ff-quick-courier-field {
    flex: 0.8 1 245px !important;
    max-width: 330px !important;
    min-width: 205px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row > .ff-quick-capture-date-field {
    flex: 0 0 170px !important;
    max-width: 178px !important;
    min-width: 160px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row > .ff-quick-top-options {
    align-self: flex-start !important;
    flex: 1.4 1 420px !important;
    min-width: 360px !important;
    padding-top: 18px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture .ff-quick-route-party-row > .ff-quick-top-options {
    padding-top: 14px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row .ff-quick-sender-options {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 12px !important;
    line-height: 18px !important;
    margin: 0 !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row .ff-quick-sender-options .checkbox {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    height: 18px !important;
    line-height: 18px !important;
    margin: 0 !important;
    min-height: 18px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row .ff-quick-sender-options .checkbox label {
    line-height: 18px !important;
    min-height: 18px !important;
    padding-left: 22px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .ff-quick-sender-name-wrap,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .ff-quick-receiver-name-wrap,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 330px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-cell {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Page history chips: keep the label and close button from squeezing into each other. */
body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page {
    min-width: 82px !important;
}

body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page > a {
    align-items: center !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    gap: 6px !important;
    justify-content: flex-start !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    width: auto !important;
}

body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--waybill > a {
    max-width: 100% !important;
    width: auto !important;
}

body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page > a > .ff-history-page-label {
    display: block !important;
    flex: 1 1 auto !important;
    line-height: 1.18 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: translateY(-2px) !important;
    white-space: nowrap !important;
}

body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page > a > .tab-close {
    flex: 0 0 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    margin-left: 0 !important;
    min-width: 20px !important;
    width: 20px !important;
}

body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page > a > .tab-close > i {
    line-height: 1 !important;
}

body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--busy > a {
    background: rgba(59, 120, 246, .14) !important;
    background: color-mix(in srgb, var(--ff-primary) 14%, var(--ff-surface)) !important;
    border-color: var(--ff-primary) !important;
    box-shadow: 0 0 0 3px var(--ff-focus-ring) !important;
    color: var(--ff-text) !important;
}

body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--busy > a > .ff-history-page-spinner {
    color: var(--ff-primary) !important;
    flex: 0 0 auto !important;
    font-size: 12px !important;
    line-height: 1 !important;
    margin-right: 1px !important;
}

body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--busy > a > .tab-close {
    opacity: .45 !important;
    pointer-events: none !important;
}

/* Bulk Capture: compact responsive field rows without leaking into other capture pages. */
body.ff-app .ff-bulk-capture .ff-bulk-main-fieldset .form-group,
body.ff-app .ff-bulk-capture .ff-bulk-main-fieldset .dx-field {
    margin-bottom: 2px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-header-row,
body.ff-app .ff-bulk-capture .ff-bulk-party-row,
body.ff-app .ff-bulk-capture .ff-bulk-details-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-header-row::before,
body.ff-app .ff-bulk-capture .ff-bulk-header-row::after,
body.ff-app .ff-bulk-capture .ff-bulk-party-row::before,
body.ff-app .ff-bulk-capture .ff-bulk-party-row::after,
body.ff-app .ff-bulk-capture .ff-bulk-details-row::before,
body.ff-app .ff-bulk-capture .ff-bulk-details-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-header-row > [class*="col-"],
body.ff-app .ff-bulk-capture .ff-bulk-party-row > [class*="col-"],
body.ff-app .ff-bulk-capture .ff-bulk-details-row > [class*="col-"] {
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-batch-field {
    flex: 0 0 90px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-client-field {
    flex: 0 1 230px !important;
    max-width: 250px !important;
    min-width: 205px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-route-field,
body.ff-app .ff-bulk-capture .ff-bulk-branch-field,
body.ff-app .ff-bulk-capture .ff-bulk-hub-field {
    flex: 0 1 140px !important;
    max-width: 150px !important;
    min-width: 120px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-date-field {
    flex: 0 0 108px !important;
    min-width: 104px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-date-field label {
    white-space: nowrap !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-driver-field {
    flex: 0 1 230px !important;
    max-width: 250px !important;
    min-width: 190px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-main-fieldset label,
body.ff-app .ff-bulk-capture .ff-bulk-main-fieldset .dx-field > label {
    display: block !important;
    float: none !important;
    line-height: 14px !important;
    margin: 0 0 1px !important;
    min-height: 14px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-bulk-capture .dx-field > label {
    display: block !important;
    float: none !important;
    line-height: 14px !important;
    margin-bottom: 1px !important;
}

body.ff-app .ff-bulk-capture .dx-field-value {
    float: none !important;
    width: 100% !important;
}

body.ff-app .ff-bulk-capture .ff-dx,
body.ff-app .ff-bulk-capture .dx-widget,
body.ff-app .ff-bulk-capture .dx-texteditor,
body.ff-app .ff-bulk-capture .dx-texteditor-container {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-date-field .input-icon,
body.ff-app .ff-bulk-capture .ff-bulk-date-field .input-icon > .form-control {
    display: block !important;
    margin: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-code-field {
    flex: 0 0 112px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-name-field,
body.ff-app .ff-bulk-capture .ff-bulk-origin-field {
    flex: 1 1 300px !important;
    min-width: 240px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-options-field {
    flex: 1 1 330px !important;
    min-width: 250px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-options-row {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 14px !important;
    min-height: var(--ff-control-h) !important;
    padding-top: 18px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-bulk-capture .ff-bulk-options-row {
    padding-top: 14px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-options-row .valuesonly,
body.ff-app .ff-bulk-capture .ff-bulk-options-row .checkbox {
    align-items: center !important;
    display: inline-flex !important;
    height: 18px !important;
    line-height: 18px !important;
    margin: 0 !important;
    min-height: 18px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-options-row .checkbox label {
    line-height: 18px !important;
    min-height: 18px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-service-field,
body.ff-app .ff-bulk-capture .ff-bulk-store-field,
body.ff-app .ff-bulk-capture .ff-bulk-schedule-field,
body.ff-app .ff-bulk-capture .ff-bulk-ref-field {
    flex: 1 1 180px !important;
    min-width: 150px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-qty-field,
body.ff-app .ff-bulk-capture .ff-bulk-prefix-field,
body.ff-app .ff-bulk-capture .ff-bulk-start-field {
    flex: 0 1 86px !important;
    max-width: 98px !important;
    min-width: 72px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-parcel-grid-responsive {
    overflow-x: auto !important;
    padding-bottom: 2px !important;
}

body.ff-app .ff-bulk-capture table.custom-dx-table.ff-parcel-grid {
    min-width: 620px !important;
}

body.ff-app .ff-bulk-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-pieces {
    width: 72px !important;
}

body.ff-app .ff-bulk-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-desc {
    width: clamp(180px, 38vw, 520px) !important;
}

body.ff-app .ff-bulk-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-dim,
body.ff-app .ff-bulk-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-mass {
    width: 88px !important;
}

/* Bulk Capture: let filter controls from the header/party/detail rows share wrapping space. */
body.ff-app .ff-bulk-capture .ff-bulk-main-fieldset {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 8px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-main-fieldset > legend {
    flex: 0 0 auto !important;
    margin-bottom: 3px !important;
    order: -2 !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-main-fieldset::before {
    content: "" !important;
    flex: 0 0 100% !important;
    height: 0 !important;
    order: -1 !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-header-row,
body.ff-app .ff-bulk-capture .ff-bulk-party-row,
body.ff-app .ff-bulk-capture .ff-bulk-details-row {
    display: contents !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-main-fieldset > .row:not(.ff-bulk-header-row):not(.ff-bulk-party-row):not(.ff-bulk-details-row),
body.ff-app .ff-bulk-capture .ff-bulk-main-fieldset > .container {
    flex: 1 1 100% !important;
    width: 100% !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-driver-field {
    flex: 0 1 230px !important;
    max-width: 250px !important;
    min-width: 190px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-options-row {
    padding-top: 8px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-bulk-capture .ff-bulk-options-row {
    padding-top: 6px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-schedule-field .dx-field,
body.ff-app .ff-bulk-capture .ff-bulk-schedule-field .dx-field-value,
body.ff-app .ff-bulk-capture .ff-bulk-schedule-field .ff-dx {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Multi-page view/query grid chrome: compact toolbar, totals, pager, and export row without changing row colours. */
body.ff-app .ff-query-grid-page > .container-fullw,
body.ff-app .ff-query-grid-page > .container-fluid.container-fullw,
body.ff-app .ff-query-grid-page .ff-grid-result-row,
body.ff-app .ff-query-grid-page .ff-grid-result-row > [class*="col-"] {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-query-grid-page .ff-grid-result-row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-query-grid-page .ff-grid-toolbar-row,
body.ff-app .ff-query-grid-page .ff-view-waybills-grid-toolbar-row {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 6px !important;
    margin-bottom: 2px !important;
    min-height: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-query-grid-page .ff-grid-toolbar-row .label,
body.ff-app .ff-query-grid-page .ff-view-waybills-grid-toolbar-row .label,
body.ff-app .ff-query-grid-page .ff-grid-toolbar-row .btn,
body.ff-app .ff-query-grid-page .ff-view-waybills-grid-toolbar-row .btn {
    align-items: center !important;
    display: inline-flex !important;
    line-height: 18px !important;
    margin: 0 !important;
    min-height: 22px !important;
    padding-bottom: 1px !important;
    padding-top: 1px !important;
}

body.ff-app .ff-query-grid-page .ff-grid-toolbar-row .checkbox,
body.ff-app .ff-query-grid-page .ff-grid-toolbar-row .checkbox-inline,
body.ff-app .ff-query-grid-page .ff-grid-toolbar-row .valuesonly,
body.ff-app .ff-query-grid-page .ff-view-waybills-grid-toolbar-row .checkbox,
body.ff-app .ff-query-grid-page .ff-view-waybills-grid-toolbar-row .checkbox-inline,
body.ff-app .ff-query-grid-page .ff-view-waybills-grid-toolbar-row .valuesonly {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-query-grid-page :is(#gridContainer, #gridContainer1, #gridContainer2, #gridContainer3, #clientGridContainer, #waybillGridContainer) .dx-datagrid-header-panel {
    margin-bottom: 0 !important;
    margin-top: -24px !important;
    min-height: 24px !important;
}

body.ff-app .ff-query-grid-page :is(#gridContainer, #gridContainer1, #gridContainer2, #gridContainer3, #clientGridContainer, #waybillGridContainer) .dx-datagrid-header-panel .dx-toolbar,
body.ff-app .ff-query-grid-page :is(#gridContainer, #gridContainer1, #gridContainer2, #gridContainer3, #clientGridContainer, #waybillGridContainer) .dx-datagrid-header-panel .dx-toolbar-items-container {
    height: 24px !important;
    min-height: 24px !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

@media (max-width: 2350px) {
    body.ff-app .ff-query-grid-page :is(#gridContainer, #gridContainer1, #gridContainer2, #gridContainer3, #clientGridContainer, #waybillGridContainer) .dx-datagrid-header-panel {
        margin-top: 0 !important;
        min-height: 26px !important;
    }

    body.ff-app .ff-query-grid-page :is(#gridContainer, #gridContainer1, #gridContainer2, #gridContainer3, #clientGridContainer, #waybillGridContainer) .dx-datagrid-header-panel .dx-toolbar-after {
        align-items: center !important;
        display: flex !important;
        justify-content: flex-end !important;
        width: 100% !important;
    }
}

body.ff-app .ff-query-grid-page .dx-datagrid-total-footer,
body.ff-app .ff-query-grid-page .dx-datagrid-total-footer .dx-datagrid-content,
body.ff-app .ff-query-grid-page .dx-datagrid-total-footer .dx-scrollable-wrapper,
body.ff-app .ff-query-grid-page .dx-datagrid-total-footer .dx-scrollable-container,
body.ff-app .ff-query-grid-page .dx-datagrid-total-footer .dx-scrollable-content,
body.ff-app .ff-query-grid-page .dx-datagrid-total-footer .dx-datagrid-table {
    height: auto !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-query-grid-page .dx-datagrid-total-footer .dx-row,
body.ff-app .ff-query-grid-page .dx-datagrid-total-footer .dx-row > td,
body.ff-app .ff-query-grid-page .dx-datagrid-total-footer .dx-footer-row,
body.ff-app .ff-query-grid-page .dx-datagrid-total-footer .dx-footer-row > td {
    height: 18px !important;
    line-height: 16px !important;
    min-height: 18px !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-query-grid-page .dx-datagrid-pager,
body.ff-app .ff-query-grid-page .dx-pager {
    align-items: center !important;
    border-bottom: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    height: 26px !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    max-height: 26px !important;
    min-height: 20px !important;
    overflow: visible !important;
    padding: 0 4px !important;
}

body.ff-app[data-grid-density="compact"] .ff-query-grid-page .dx-datagrid-pager,
body.ff-app[data-grid-density="compact"] .ff-query-grid-page .dx-pager,
body.ff-app.ff-grid-density-compact .ff-query-grid-page .dx-datagrid-pager,
body.ff-app.ff-grid-density-compact .ff-query-grid-page .dx-pager {
    height: 22px !important;
    max-height: 22px !important;
}

body.ff-app .ff-query-grid-page .dx-datagrid-pager .dx-page-sizes,
body.ff-app .ff-query-grid-page .dx-datagrid-pager .dx-pages,
body.ff-app .ff-query-grid-page .dx-pager .dx-page-sizes,
body.ff-app .ff-query-grid-page .dx-pager .dx-pages {
    align-items: center !important;
    display: inline-flex !important;
    height: 22px !important;
    line-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-query-grid-page .dx-datagrid-pager .dx-info,
body.ff-app .ff-query-grid-page .dx-pager .dx-info {
    line-height: 20px !important;
    margin: 0 4px !important;
    padding: 0 !important;
}

body.ff-app .ff-query-grid-page .dx-datagrid-pager .dx-page,
body.ff-app .ff-query-grid-page .dx-datagrid-pager .dx-page-size,
body.ff-app .ff-query-grid-page .dx-datagrid-pager .dx-navigate-button,
body.ff-app .ff-query-grid-page .dx-pager .dx-page,
body.ff-app .ff-query-grid-page .dx-pager .dx-page-size,
body.ff-app .ff-query-grid-page .dx-pager .dx-navigate-button {
    line-height: 18px !important;
    margin: 0 1px !important;
    min-height: 20px !important;
    padding: 0 5px !important;
}

/* Collection full-capture polish from menu sweep. */
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-full-basic-docs > .row > .ff-full-collection-id-field {
    flex: 0 0 122px !important;
    max-width: 130px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-full-basic-docs > .row > .ff-full-collection-date-field {
    flex-basis: 110px !important;
    max-width: 114px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-full-basic-docs > .row > .ff-full-collection-date-field .input-icon,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-full-basic-docs > .row > .ff-full-collection-date-field input.form-control[uib-datepicker-popup] {
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-additional-actions-row {
    align-items: flex-end;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-additional-actions-row::before,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-additional-actions-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-additional-actions-row > [class*="col-"] {
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-additional-convert,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-additional-reschedule {
    flex: 0 0 auto;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-convert-btn,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-reschedule-btn {
    align-items: center;
    display: inline-flex;
    height: var(--ff-control-h) !important;
    justify-content: center;
    margin-top: 16px !important;
    min-height: var(--ff-control-h) !important;
    padding: 0 10px !important;
    white-space: nowrap;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-additional-id-row {
    gap: 4px 10px;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-quote-action {
    margin-left: -10px !important;
    margin-right: 10px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-additional-id-row > .ff-additional-linked-wrap {
    flex: 0 1 350px;
    margin-right: 0;
    min-width: 315px;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-additional-id-row .ff-additional-linked-row {
    flex-wrap: nowrap;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-original-collection-field {
    flex: 1 1 145px;
    margin-left: 8px;
    min-width: 135px;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-user-branch-wrap {
    flex: 0 1 285px;
    margin-right: 8px;
    min-width: 245px;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-user-branch-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-user-branch-row::before,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-user-branch-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-user-branch-row > [class*="col-"] {
    flex: 1 1 115px;
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-additional-meta-wide {
    flex: 1 1 455px;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-additional-meta-pair-row > .ff-additional-meta-field {
    flex: 0 1 125px;
    max-width: 145px;
    min-width: 112px;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-additional-comment-field {
    flex: 1 1 210px;
    min-width: 180px;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-convert-btn,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-reschedule-btn,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-convert-btn,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-reschedule-btn {
    margin-top: 13px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-other-value-row {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-other-value-row::before,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-other-value-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-other-value-row > [class*="col-"] {
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-other-value-row > .col-md-3 {
    flex: 0 1 160px;
    max-width: 190px;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-transport-order-field {
    align-self: flex-end;
    flex: 0 0 138px;
    max-width: 145px;
    min-width: 132px;
    padding-bottom: 7px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-transport-order-field .checkbox {
    margin: 0 !important;
    min-height: 22px;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-other-check-field {
    align-self: flex-end;
    padding-bottom: 2px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-other-check-field .checkbox,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-other-check-field .checkbox {
    margin-top: 12px !important;
}

/* Compact dropdown popups: keep list items in the same density as the field that opened them. */
body.ff-app[data-grid-density="compact"] .ui-select-bootstrap .dropdown-menu,
body.ff-app[data-grid-density="compact"] .ui-select-bootstrap .ui-select-choices,
body.ff-app[data-grid-density="compact"] .ui-select-bootstrap .ui-select-choices-row > a,
body.ff-app[data-grid-density="compact"] .ui-select-bootstrap .ui-select-choices-row-inner,
body.ff-app[data-grid-density="compact"] .ui-select-bootstrap .ui-select-choices-content,
body.ff-app.ff-grid-density-compact .ui-select-bootstrap .dropdown-menu,
body.ff-app.ff-grid-density-compact .ui-select-bootstrap .ui-select-choices,
body.ff-app.ff-grid-density-compact .ui-select-bootstrap .ui-select-choices-row > a,
body.ff-app.ff-grid-density-compact .ui-select-bootstrap .ui-select-choices-row-inner,
body.ff-app.ff-grid-density-compact .ui-select-bootstrap .ui-select-choices-content,
body.ff-app[data-grid-density="compact"] .ff-ms .multiselect-parent > ul.dropdown-menu,
body.ff-app[data-grid-density="compact"] .ff-ms .multiselect-parent > ul.dropdown-menu > li > a,
body.ff-app[data-grid-density="compact"] .ff-ms .multiselect-parent > ul.dropdown-menu label,
body.ff-app.ff-grid-density-compact .ff-ms .multiselect-parent > ul.dropdown-menu,
body.ff-app.ff-grid-density-compact .ff-ms .multiselect-parent > ul.dropdown-menu > li > a,
body.ff-app.ff-grid-density-compact .ff-ms .multiselect-parent > ul.dropdown-menu label,
body.ff-app[data-grid-density="compact"] .dx-overlay-wrapper .dx-list-item,
body.ff-app[data-grid-density="compact"] .dx-overlay-wrapper .dx-list-item-content,
body.ff-app.ff-grid-density-compact .dx-overlay-wrapper .dx-list-item,
body.ff-app.ff-grid-density-compact .dx-overlay-wrapper .dx-list-item-content {
    font-size: var(--ff-control-font-size, 11px) !important;
    line-height: 1.2 !important;
}

body.ff-app[data-grid-density="compact"] .ui-select-bootstrap .ui-select-choices-row > a,
body.ff-app.ff-grid-density-compact .ui-select-bootstrap .ui-select-choices-row > a,
body.ff-app[data-grid-density="compact"] .ff-ms .multiselect-parent > ul.dropdown-menu > li > a,
body.ff-app.ff-grid-density-compact .ff-ms .multiselect-parent > ul.dropdown-menu > li > a {
    padding-bottom: 3px !important;
    padding-top: 3px !important;
}

body.ff-app[data-grid-density="compact"] .ff-ms .multiselect-parent.btn-group.dropdown-multiselect button.dropdown-toggle.btn.btn-default,
body.ff-app.ff-grid-density-compact .ff-ms .multiselect-parent.btn-group.dropdown-multiselect button.dropdown-toggle.btn.btn-default {
    font-size: var(--ff-control-font-size, 11px) !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

/* Shared view/query filter alignment: keep list captions and Date Period compact. */
body.ff-app .ff-query-grid-page .ff-sr-card .form-group,
body.ff-app .ff-query-grid-page .ff-sr-card .dx-field {
    margin-bottom: 0 !important;
}

body.ff-app .ff-query-grid-page .ff-sr-card .form-group > label,
body.ff-app .ff-query-grid-page .ff-sr-card .dx-field > label {
    line-height: 14px !important;
    margin-bottom: 1px !important;
    min-height: 14px !important;
}

body.ff-app[data-grid-density="compact"] .ff-query-grid-page .ff-sr-card .form-group > label,
body.ff-app[data-grid-density="compact"] .ff-query-grid-page .ff-sr-card .dx-field > label,
body.ff-app.ff-grid-density-compact .ff-query-grid-page .ff-sr-card .form-group > label,
body.ff-app.ff-grid-density-compact .ff-query-grid-page .ff-sr-card .dx-field > label {
    line-height: 12px !important;
    margin-bottom: 0 !important;
    min-height: 12px !important;
}

body.ff-app .ff-query-grid-page .ff-sr-card label .text-muted,
body.ff-app .ff-query-grid-page .ff-sr-card label span.text-muted {
    font-size: 10px !important;
    line-height: 10px !important;
    margin-top: 0 !important;
    max-height: 12px !important;
    padding: 1px 4px !important;
}

body.ff-app .ff-query-grid-page .ff-date-period-group {
    align-items: stretch !important;
    display: flex !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    max-width: 100% !important;
    min-height: var(--ff-control-h) !important;
    width: 100% !important;
}

body.ff-app .ff-query-grid-page .ff-date-period-group > .ff-date-period-ignore {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 76px !important;
    height: var(--ff-control-h) !important;
    justify-content: center !important;
    min-height: var(--ff-control-h) !important;
    min-width: 76px !important;
    padding: 0 !important;
    width: 76px !important;
}

body.ff-app .ff-query-grid-page .ff-date-period-group #ignoreDate + label {
    align-items: center !important;
    display: inline-flex !important;
    font-size: inherit !important;
    height: var(--ff-control-h) !important;
    line-height: var(--ff-control-h) !important;
    margin: 0 !important;
    min-height: var(--ff-control-h) !important;
    padding: 0 6px 0 25px !important;
}

body.ff-app .ff-query-grid-page .ff-date-period-group #ignoreDate + label::before {
    height: 14px !important;
    left: 6px !important;
    width: 14px !important;
}

body.ff-app .ff-query-grid-page .ff-date-period-group #ignoreDate + label::after {
    left: 9px !important;
}

body.ff-app .ff-query-grid-page .ff-date-period-group > .ff-date-period-select {
    flex: 1 1 auto !important;
    height: var(--ff-control-h) !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    min-height: var(--ff-control-h) !important;
    min-width: 0 !important;
    padding: 0 18px 0 8px !important;
}

body.ff-app[data-grid-density="compact"] .ff-query-grid-page .ff-date-period-group > .ff-date-period-ignore,
body.ff-app.ff-grid-density-compact .ff-query-grid-page .ff-date-period-group > .ff-date-period-ignore {
    flex-basis: 68px !important;
    min-width: 68px !important;
    width: 68px !important;
}

body.ff-app[data-grid-density="compact"] .ff-query-grid-page .ff-date-period-group #ignoreDate + label,
body.ff-app.ff-grid-density-compact .ff-query-grid-page .ff-date-period-group #ignoreDate + label {
    padding-left: 22px !important;
    padding-right: 4px !important;
}

body.ff-app[data-grid-density="compact"] .ff-query-grid-page .ff-date-period-group #ignoreDate + label::before,
body.ff-app.ff-grid-density-compact .ff-query-grid-page .ff-date-period-group #ignoreDate + label::before {
    left: 5px !important;
}

body.ff-app[data-grid-density="compact"] .ff-query-grid-page .ff-date-period-group #ignoreDate + label::after,
body.ff-app.ff-grid-density-compact .ff-query-grid-page .ff-date-period-group #ignoreDate + label::after {
    left: 8px !important;
}

/* View Collections filter flow: reuse the compact View Waybills sizing pattern. */
body.ff-app .ff-view-collections .ff-sr-card {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px 8px !important;
}

body.ff-app .ff-view-collections .ff-sr-card > .ff-sr-legend,
body.ff-app .ff-view-collections .ff-sr-card > .ff-filter-actions-slot {
    flex: 0 0 100% !important;
}

body.ff-app .ff-view-collections .ff-sr-card > .ff-waybill-filter-grid,
body.ff-app .ff-view-collections .ff-sr-card > .ff-filter-flow-row {
    display: contents !important;
}

body.ff-app .ff-view-collections .ff-sr-card > .ff-waybill-filter-grid::before,
body.ff-app .ff-view-collections .ff-sr-card > .ff-waybill-filter-grid::after,
body.ff-app .ff-view-collections .ff-sr-card > .ff-filter-flow-row::before,
body.ff-app .ff-view-collections .ff-sr-card > .ff-filter-flow-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-view-collections .ff-waybill-filter-grid > [class*="col-"],
body.ff-app .ff-view-collections .ff-filter-flow-row > [class*="col-"] {
    float: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-view-collections .ff-waybill-filter-grid > .ff-filter-id {
    flex: 0 1 155px !important;
    max-width: 180px !important;
    min-width: 115px !important;
}

body.ff-app .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-type {
    flex: 0 1 155px !important;
    max-width: 180px !important;
    min-width: 135px !important;
}

body.ff-app .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-period {
    flex: 0 1 155px !important;
    max-width: 170px !important;
    min-width: 145px !important;
}

body.ff-app .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-range {
    flex: 0 1 315px !important;
    max-width: 340px !important;
    min-width: 285px !important;
}

body.ff-app .ff-view-collections .ff-waybill-filter-grid > .ff-filter-branch {
    flex: 0 1 240px !important;
    max-width: 275px !important;
    min-width: 190px !important;
}

body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-client {
    flex: 1 1 310px !important;
    max-width: 410px !important;
    min-width: 250px !important;
}

body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-acc {
    flex: 0 1 145px !important;
    max-width: 170px !important;
    min-width: 115px !important;
}

body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-agent,
body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-driver {
    flex: 0 1 245px !important;
    max-width: 285px !important;
    min-width: 195px !important;
}

body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-vehicle {
    flex: 0 1 220px !important;
    max-width: 250px !important;
    min-width: 170px !important;
}

body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-order {
    flex: 0 1 180px !important;
    max-width: 210px !important;
    min-width: 140px !important;
}

body.ff-app .ff-view-collections .ff-filter-schedule {
    flex: 0 1 235px !important;
    max-width: 270px !important;
    min-width: 175px !important;
}

body.ff-app .ff-view-collections .ff-filter-user {
    flex: 0 1 190px !important;
    max-width: 230px !important;
    min-width: 150px !important;
}

body.ff-app .ff-view-collections .ff-filter-bool-wide {
    flex: 0 1 150px !important;
    max-width: 180px !important;
    min-width: 125px !important;
}

body.ff-app .ff-view-collections .ff-filter-collection-status-row > .col-md-12 {
    align-items: center !important;
    display: flex !important;
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
    gap: 2px 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-view-collections .ff-filter-collection-status-row .checkbox {
    margin: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-view-collections .ff-waybill-filter-grid > .ff-filter-id,
body.ff-app.ff-grid-density-compact .ff-view-collections .ff-waybill-filter-grid > .ff-filter-id {
    flex-basis: 95px !important;
    max-width: 120px !important;
    min-width: 82px !important;
}

body.ff-app[data-grid-density="compact"] .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-type,
body.ff-app.ff-grid-density-compact .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-type {
    flex-basis: 265px !important;
    max-width: 320px !important;
    min-width: 205px !important;
}

body.ff-app[data-grid-density="compact"] .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-period,
body.ff-app.ff-grid-density-compact .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-period {
    flex-basis: 150px !important;
    max-width: 160px !important;
    min-width: 140px !important;
}

body.ff-app[data-grid-density="compact"] .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-range,
body.ff-app.ff-grid-density-compact .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-range {
    flex-basis: 300px !important;
    max-width: 325px !important;
    min-width: 275px !important;
}

body.ff-app[data-grid-density="compact"] .ff-view-collections .ff-waybill-filter-grid > .ff-filter-branch,
body.ff-app.ff-grid-density-compact .ff-view-collections .ff-waybill-filter-grid > .ff-filter-branch {
    flex-basis: 225px !important;
    max-width: 260px !important;
    min-width: 180px !important;
}

/* Shared query/view filter final alignment.
   Keep list controls on the same baseline as text fields; this is the View Waybills fix generalized for other grid pages. */
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-waybill-filter-grid,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-flow-row,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-inline-row {
    align-items: flex-start !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-field,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-field .form-group,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-field .dx-field {
    align-self: flex-start !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    margin-bottom: 0 !important;
    min-width: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-field label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-field label.width100,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-field .dx-field > label {
    align-items: center !important;
    display: flex !important;
    flex: 0 0 12px !important;
    height: 12px !important;
    line-height: 12px !important;
    margin: 0 0 1px !important;
    max-height: 12px !important;
    min-height: 12px !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-field label .pull-right,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-field label [json-dbl] {
    align-self: center !important;
    display: inline-block !important;
    float: none !important;
    font-size: 9px !important;
    line-height: 10px !important;
    margin-left: auto !important;
    margin-top: 0 !important;
    max-height: 11px !important;
    overflow: hidden !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-flow-row .ui-select-container,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-inline-row .ui-select-container,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-waybill-filter-grid .ui-select-container,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-flow-row .ff-dx,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-inline-row .ff-dx,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-waybill-filter-grid .ff-dx,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-flow-row .dx-widget,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-inline-row .dx-widget,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-waybill-filter-grid .dx-widget {
    box-sizing: border-box !important;
    display: block !important;
    height: var(--ff-control-h) !important;
    margin-top: 0 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    vertical-align: top !important;
    width: 100% !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-flow-row .ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-inline-row .ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-waybill-filter-grid .ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn {
    align-items: center !important;
    display: flex !important;
    height: var(--ff-control-h) !important;
    line-height: 1 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-date-period .ff-date-period-group {
    align-items: start !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    height: 24px !important;
    line-height: 24px !important;
    max-height: 24px !important;
    max-width: 142px !important;
    min-height: 24px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    width: 142px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-date-period .ff-date-period-ignore {
    align-self: start !important;
    display: block !important;
    height: 24px !important;
    line-height: 24px !important;
    max-height: 24px !important;
    min-height: 24px !important;
    min-width: 0 !important;
    padding: 0 !important;
    position: relative !important;
    width: 54px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label {
    display: block !important;
    font-size: 11px !important;
    height: 24px !important;
    line-height: 24px !important;
    margin: 0 !important;
    max-height: 24px !important;
    min-height: 24px !important;
    padding: 0 2px 0 19px !important;
    position: absolute !important;
    top: 0 !important;
    transform: none !important;
    width: 54px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before {
    height: 11px !important;
    left: 4px !important;
    top: 6px !important;
    transform: none !important;
    width: 11px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after {
    left: 7px !important;
    top: 9px !important;
    transform: rotate(-45deg) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-date-period .ff-date-period-select {
    height: 24px !important;
    line-height: 22px !important;
    max-height: 24px !important;
    min-height: 24px !important;
    min-width: 0 !important;
    padding: 0 4px !important;
    vertical-align: top !important;
    width: auto !important;
}

/* Collection capture Other Details: align the first field and keep Trans Order beside Order #. */
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-other-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-collection-grid {
    flex: 0 1 382px !important;
    max-width: 410px !important;
    min-width: 335px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-delivery-grid {
    flex: 0 1 302px !important;
    max-width: 325px !important;
    min-width: 284px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-collection-grid > .row,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-delivery-grid > .row {
    gap: 4px 5px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-collection-grid .ff-full-order-field {
    flex: 1 1 96px !important;
    max-width: 126px !important;
    min-width: 88px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-collection-grid .ff-full-transport-order-field {
    align-self: flex-start !important;
    flex: 0 0 94px !important;
    max-width: 98px !important;
    min-width: 88px !important;
    padding-bottom: 0 !important;
    padding-top: 21px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-collection-grid .ff-full-transport-order-field .checkbox {
    margin: 0 !important;
    min-height: 18px !important;
    white-space: nowrap;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-time-field {
    flex-basis: 62px !important;
    max-width: 62px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-collection-grid {
    flex-basis: 360px !important;
    min-width: 318px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-delivery-grid {
    flex-basis: 286px !important;
    min-width: 270px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-collection-grid .ff-full-transport-order-field {
    padding-top: 14px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-time-field {
    flex-basis: 58px !important;
    max-width: 58px !important;
}

/* Full capture Other Details: keep the row aligned with Service and make room for Book Date after Del Time. */
body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-other-grid,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-other-grid {
    gap: 4px 5px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-other-grid > .ff-full-driver-field,
body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-other-grid > .ff-full-schedule-field,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-other-grid > .ff-full-driver-field,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-other-grid > .ff-full-schedule-field {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-schedule-field,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-schedule-field {
    flex-basis: 162px !important;
    max-width: 182px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-collection-grid,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-collection-grid {
    flex-basis: 276px !important;
    max-width: 304px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-order-field,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-order-field {
    flex-basis: 94px !important;
    min-width: 86px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-delivery-grid,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-delivery-grid {
    flex-basis: 426px !important;
    max-width: 446px !important;
    min-width: 410px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-col-time-field,
body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-close-time-field,
body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-del-time-field,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-col-time-field,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-close-time-field,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-del-time-field {
    flex: 0 0 58px !important;
    max-width: 58px !important;
    min-width: 54px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-col-time-field input.time.settime,
body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-close-time-field input.time.settime,
body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-del-time-field input.time.settime,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-col-time-field input.time.settime,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-close-time-field input.time.settime,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-del-time-field input.time.settime {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-delivery-grid .ff-full-book-date-field {
    flex: 0 1 108px !important;
    max-width: 116px !important;
    min-width: 104px !important;
}

@media (max-width: 900px) {
    body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-delivery-grid,
    body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-delivery-grid {
        min-width: 0 !important;
    }
}

/* Collection capture Debrief Details: keep fields tight and align the Debrief action with the input row. */
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-details {
    margin-top: 4px !important;
    padding: 8px 10px 7px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-details > legend {
    margin-bottom: 5px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-row,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-date-time-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-row::before,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-row::after,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-date-time-row::before,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-date-time-row::after {
    content: none !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-row > [class*="col-"],
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-date-time-row > [class*="col-"] {
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-details .form-group {
    margin-bottom: 0 !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-details label {
    margin-bottom: 1px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-date-time {
    flex: 0 1 206px !important;
    max-width: 220px !important;
    min-width: 182px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-date {
    flex: 1 1 116px !important;
    max-width: 130px !important;
    min-width: 108px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-time {
    flex: 0 0 70px !important;
    max-width: 72px !important;
    min-width: 66px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-person {
    flex: 0 1 150px !important;
    max-width: 180px !important;
    min-width: 120px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-comment {
    flex: 1 1 210px !important;
    max-width: 310px !important;
    min-width: 165px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-note {
    flex: 0 1 170px !important;
    max-width: 205px !important;
    min-width: 140px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-action {
    align-self: flex-start !important;
    flex: 0 0 78px !important;
    max-width: 82px !important;
    min-width: 74px !important;
    padding-top: 15px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-btn {
    align-items: center !important;
    display: inline-flex !important;
    height: var(--ff-control-h) !important;
    justify-content: center !important;
    margin-top: 0 !important;
    min-height: var(--ff-control-h) !important;
    padding: 0 10px !important;
    width: 100% !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-details {
    margin-top: 2px !important;
    padding: 6px 8px 5px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-details > legend {
    margin-bottom: 3px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-row,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-date-time-row {
    gap: 3px 6px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-date-time {
    flex-basis: 190px !important;
    max-width: 202px !important;
    min-width: 176px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-date {
    flex-basis: 110px !important;
    max-width: 118px !important;
    min-width: 104px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-time {
    flex-basis: 62px !important;
    max-width: 64px !important;
    min-width: 60px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-person {
    flex-basis: 132px !important;
    max-width: 160px !important;
    min-width: 112px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-comment {
    flex-basis: 185px !important;
    max-width: 280px !important;
    min-width: 150px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-note {
    flex-basis: 150px !important;
    max-width: 185px !important;
    min-width: 130px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-action {
    flex-basis: 72px !important;
    max-width: 76px !important;
    min-width: 70px !important;
    padding-top: 12px !important;
}

/* Collection debrief: compact date field and paired Debrief/Clear actions. */
body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-row,
body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-date-time-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-row::before,
body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-row::after,
body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-date-time-row::before,
body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-date-time-row::after {
    content: none !important;
}

body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-date-time-row > [class*="col-"] {
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-date-time,
body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-date-time {
    flex: 0 1 184px !important;
    max-width: 196px !important;
    min-width: 170px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-date,
body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-date {
    flex: 0 1 104px !important;
    max-width: 112px !important;
    min-width: 98px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-time,
body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-time {
    flex: 0 0 66px !important;
    max-width: 68px !important;
    min-width: 62px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-action,
body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-action {
    align-self: flex-start !important;
    display: flex !important;
    flex: 0 0 150px !important;
    gap: 6px !important;
    max-width: 156px !important;
    min-width: 144px !important;
    padding-top: 15px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-action .ff-col-debrief-btn,
body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-action .ff-col-debrief-btn {
    flex: 1 1 0 !important;
    gap: 5px !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-action .ff-col-debrief-clear-btn,
body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-action .ff-col-debrief-clear-btn {
    flex-basis: 68px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-date-time,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-date-time {
    flex-basis: 170px !important;
    max-width: 182px !important;
    min-width: 162px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-date,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-date {
    flex-basis: 98px !important;
    max-width: 104px !important;
    min-width: 94px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-action,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-action {
    flex-basis: 138px !important;
    max-width: 144px !important;
    min-width: 132px !important;
    padding-top: 12px !important;
}

/* Capture required markers need optical baseline alignment with the label text. */
body.ff-app .ff-waybill.ff-full-capture label:has(.symbol.required) .symbol.required::before,
body.ff-app .ff-capture-page:not(.ff-full-capture) label:has(.symbol.required) .symbol.required::before {
    transform: translateY(2px) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture label:has(.symbol.required) .symbol.required::before,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-capture-page:not(.ff-full-capture) label:has(.symbol.required) .symbol.required::before {
    transform: translateY(1px) !important;
}

/* View Collections final filter widths: keep the shared top-alignment fix without shrinking list fields. */
body.ff-app .ff-view-collections .ff-sr-card {
    gap: 3px 8px !important;
}

body.ff-app .ff-view-collections .ff-waybill-filter-grid > .ff-filter-id {
    flex: 0 1 135px !important;
    max-width: 165px !important;
    min-width: 105px !important;
}

body.ff-app .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-type {
    flex: 0 1 155px !important;
    max-width: 180px !important;
    min-width: 135px !important;
}

body.ff-app .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-period {
    flex: 0 1 150px !important;
    max-width: 160px !important;
    min-width: 142px !important;
}

body.ff-app .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-range {
    flex: 0 1 315px !important;
    max-width: 340px !important;
    min-width: 285px !important;
}

body.ff-app .ff-view-collections .ff-waybill-filter-grid > .ff-filter-branch {
    flex: 0 1 285px !important;
    max-width: 340px !important;
    min-width: 230px !important;
}

body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-client {
    flex: 1.4 1 360px !important;
    max-width: 520px !important;
    min-width: 285px !important;
}

body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-acc {
    flex: 0 1 145px !important;
    max-width: 175px !important;
    min-width: 115px !important;
}

body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-agent,
body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-driver {
    flex: 1 1 285px !important;
    max-width: 360px !important;
    min-width: 225px !important;
}

body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-vehicle {
    flex: 0 1 245px !important;
    max-width: 290px !important;
    min-width: 195px !important;
}

body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-order {
    flex: 0 1 205px !important;
    max-width: 245px !important;
    min-width: 155px !important;
}

body.ff-app .ff-view-collections .ff-filter-schedule {
    flex: 0 1 270px !important;
    max-width: 330px !important;
    min-width: 210px !important;
}

body.ff-app .ff-view-collections .ff-filter-user {
    flex: 0 1 225px !important;
    max-width: 275px !important;
    min-width: 175px !important;
}

body.ff-app .ff-view-collections .ff-filter-bool-wide {
    flex: 0 1 132px !important;
    max-width: 150px !important;
    min-width: 112px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-waybill-filter-grid > .ff-filter-id {
    flex-basis: 118px !important;
    max-width: 150px !important;
    min-width: 95px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-type {
    flex-basis: 145px !important;
    max-width: 170px !important;
    min-width: 130px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-period {
    flex-basis: 144px !important;
    max-width: 148px !important;
    min-width: 142px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-range {
    flex-basis: 300px !important;
    max-width: 325px !important;
    min-width: 278px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-waybill-filter-grid > .ff-filter-branch {
    flex-basis: 265px !important;
    max-width: 320px !important;
    min-width: 220px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-client {
    flex-basis: 340px !important;
    max-width: 500px !important;
    min-width: 275px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-agent,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-driver {
    flex-basis: 270px !important;
    max-width: 340px !important;
    min-width: 220px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-vehicle,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-schedule {
    flex-basis: 240px !important;
    max-width: 300px !important;
    min-width: 190px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-user {
    flex-basis: 210px !important;
    max-width: 260px !important;
    min-width: 165px !important;
}

/* Shared query/view list control guard: keep useful field widths all the way through nested list widgets. */
body.ff-app .ff-query-grid-page .ff-filter-field > .form-group,
body.ff-app .ff-query-grid-page .ff-filter-field > .dx-field {
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-query-grid-page .ff-filter-field .ff-control,
body.ff-app .ff-query-grid-page .ff-filter-field .ff-dx,
body.ff-app .ff-query-grid-page .ff-filter-field .ui-select-container,
body.ff-app .ff-query-grid-page .ff-filter-field .ui-select-bootstrap,
body.ff-app .ff-query-grid-page .ff-filter-field .ui-select-bootstrap > .ui-select-match,
body.ff-app .ff-query-grid-page .ff-filter-field .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-query-grid-page .ff-filter-field .ui-select-bootstrap > .ui-select-match > .ui-select-toggle,
body.ff-app .ff-query-grid-page .ff-filter-field .select2-container,
body.ff-app .ff-query-grid-page .ff-filter-field .select2-choice,
body.ff-app .ff-query-grid-page .ff-filter-field .dx-widget,
body.ff-app .ff-query-grid-page .ff-filter-field .dx-texteditor,
body.ff-app .ff-query-grid-page .ff-filter-field .dx-texteditor-container {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-query-grid-page .ff-filter-field .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-query-grid-page .ff-filter-field .ui-select-bootstrap > .ui-select-match > .ui-select-toggle {
    align-items: center !important;
    display: flex !important;
    justify-content: space-between !important;
}

body.ff-app .ff-query-grid-page .ff-filter-field .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-query-grid-page .ff-filter-field .ui-select-bootstrap .ui-select-placeholder {
    display: block !important;
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app .ff-view-collections .ff-filter-field .ui-select-bootstrap,
body.ff-app .ff-view-collections .ff-filter-field .ui-select-bootstrap > .ui-select-match,
body.ff-app .ff-view-collections .ff-filter-field .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-view-collections .ff-filter-field .ui-select-bootstrap > .ui-select-match > .ui-select-toggle,
body.ff-app .ff-view-collections .ff-filter-field .ff-dx {
    margin-top: -1px !important;
}

body.ff-app .ff-view-collections .ff-filter-field .ui-select-bootstrap .ui-select-placeholder {
    flex: 0 0 auto !important;
    min-width: 52px !important;
}

body.ff-app .ff-query-grid-page .ff-filter-field .ui-select-bootstrap .ui-select-placeholder.ng-hide,
body.ff-app .ff-query-grid-page .ff-filter-field .ui-select-bootstrap .ui-select-placeholder[aria-hidden="true"] {
    display: none !important;
    flex-basis: 0 !important;
    min-width: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-driver .ff-dx,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-vehicle .ff-dx {
    overflow: visible !important;
    padding: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-driver .dx-selectbox,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-vehicle .dx-selectbox,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-driver .dx-texteditor,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-vehicle .dx-texteditor,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-driver .dx-texteditor-container,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-vehicle .dx-texteditor-container {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-driver .dx-texteditor-input,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-vehicle .dx-texteditor-input {
    height: calc(var(--ff-control-h) - 2px) !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    max-height: calc(var(--ff-control-h) - 2px) !important;
    min-height: calc(var(--ff-control-h) - 2px) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-driver .dx-placeholder,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-vehicle .dx-placeholder {
    line-height: calc(var(--ff-control-h) - 2px) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-driver .dx-dropdowneditor-button,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-vehicle .dx-dropdowneditor-button {
    height: calc(var(--ff-control-h) - 2px) !important;
    min-height: calc(var(--ff-control-h) - 2px) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-date-type .ui-select-bootstrap:not(.open) .ui-select-search {
    border: 0 !important;
    flex: 0 0 0 !important;
    min-width: 0 !important;
    opacity: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-date-type .ui-select-bootstrap > .ui-select-match > .ui-select-toggle {
    justify-content: flex-start !important;
    padding-left: 8px !important;
    padding-right: 28px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-date-type .ui-select-bootstrap .ui-select-match-text,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-date-type .ui-select-bootstrap .ui-select-match-text span {
    display: block !important;
    flex: 1 1 auto !important;
    line-height: calc(var(--ff-control-h) - 4px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-driver .dx-placeholder,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-vehicle .dx-placeholder {
    align-items: center !important;
    display: flex !important;
    height: 100% !important;
    line-height: 1.2 !important;
    top: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-driver .dx-placeholder::before,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-vehicle .dx-placeholder::before {
    display: block !important;
    line-height: 1.2 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-driver .dx-placeholder::after,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-vehicle .dx-placeholder::after {
    display: none !important;
}

/* View Images filter: keep date fields from spilling into Branch and align staff selectors. */
body.ff-app .ff-imaging-list .ff-image-filter-top-row,
body.ff-app .ff-imaging-list .ff-image-date-row,
body.ff-app .ff-imaging-list .ff-image-party-row,
body.ff-app .ff-imaging-list .ff-image-reference-row,
body.ff-app .ff-imaging-list .ff-image-user-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-imaging-list .ff-image-filter-top-row::before,
body.ff-app .ff-imaging-list .ff-image-filter-top-row::after,
body.ff-app .ff-imaging-list .ff-image-date-row::before,
body.ff-app .ff-imaging-list .ff-image-date-row::after,
body.ff-app .ff-imaging-list .ff-image-party-row::before,
body.ff-app .ff-imaging-list .ff-image-party-row::after,
body.ff-app .ff-imaging-list .ff-image-reference-row::before,
body.ff-app .ff-imaging-list .ff-image-reference-row::after,
body.ff-app .ff-imaging-list .ff-image-user-row::before,
body.ff-app .ff-imaging-list .ff-image-user-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-imaging-list .ff-image-filter-top-row > [class*="col-"],
body.ff-app .ff-imaging-list .ff-image-date-row > [class*="col-"],
body.ff-app .ff-imaging-list .ff-image-party-row > [class*="col-"],
body.ff-app .ff-imaging-list .ff-image-reference-row > [class*="col-"],
body.ff-app .ff-imaging-list .ff-image-user-row > [class*="col-"],
body.ff-app .ff-imaging-list .ff-image-staff-fields > [class*="col-"] {
    float: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-imaging-list .ff-image-document-field {
    flex: 0 1 210px !important;
    max-width: 255px !important;
    min-width: 155px !important;
}

body.ff-app .ff-imaging-list .ff-image-date-block {
    flex: 0 1 520px !important;
    max-width: 560px !important;
    min-width: 410px !important;
}

body.ff-app .ff-imaging-list .ff-image-date-period {
    flex: 0 0 158px !important;
    max-width: 158px !important;
    min-width: 148px !important;
}

body.ff-app .ff-imaging-list .ff-image-date-range {
    flex: 1 1 335px !important;
    max-width: 390px !important;
    min-width: 270px !important;
}

body.ff-app .ff-imaging-list .ff-image-branch-field {
    flex: 1 1 245px !important;
    max-width: 340px !important;
    min-width: 190px !important;
}

body.ff-app .ff-imaging-list .ff-image-client-field {
    flex: 1 1 360px !important;
    max-width: 500px !important;
    min-width: 270px !important;
}

body.ff-app .ff-imaging-list .ff-image-supplier-field {
    flex: 0 1 270px !important;
    max-width: 340px !important;
    min-width: 220px !important;
}

body.ff-app .ff-imaging-list .ff-image-hub-field {
    flex: 0 1 230px !important;
    max-width: 285px !important;
    min-width: 185px !important;
}

body.ff-app .ff-imaging-list .ff-image-reference-row > .ff-filter-field,
body.ff-app .ff-imaging-list .ff-image-user-row > .ff-filter-field {
    flex: 0 1 175px !important;
    max-width: 220px !important;
    min-width: 132px !important;
}

body.ff-app .ff-imaging-list .ff-image-reference-row > .ff-image-courier-field {
    flex: 0 1 145px !important;
    max-width: 170px !important;
    min-width: 118px !important;
}

body.ff-app .ff-imaging-list .ff-image-courier-field textarea.form-control {
    height: var(--ff-control-h) !important;
    line-height: calc(var(--ff-control-h) - 6px) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    overflow: auto !important;
    resize: vertical !important;
    white-space: nowrap !important;
}

body.ff-app .ff-imaging-list .ff-image-staff-fields {
    display: contents !important;
}

body.ff-app .ff-imaging-list .ff-image-user-field,
body.ff-app .ff-imaging-list .ff-image-webuser-field {
    flex: 0 1 190px !important;
    max-width: 235px !important;
    min-width: 150px !important;
}

body.ff-app .ff-imaging-list .ff-image-actions-inline {
    align-self: flex-start !important;
    display: flex !important;
    flex: 1 1 290px !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    max-width: 100% !important;
    min-width: 250px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 16px !important;
}

body.ff-app .ff-imaging-list .ff-image-actions-inline .ff-image-filter-actions {
    justify-content: flex-end !important;
    margin-bottom: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-imaging-list .ff-image-actions-row {
    display: flex !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-imaging-list .ff-image-actions-row::before,
body.ff-app .ff-imaging-list .ff-image-actions-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-imaging-list .ff-image-filter-actions {
    align-items: center !important;
    display: flex !important;
    gap: 6px 12px !important;
    justify-content: flex-end !important;
    margin-bottom: 4px !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-imaging-list .ff-image-keep-filter {
    float: none !important;
    margin: 0 !important;
    order: 1 !important;
}

body.ff-app .ff-imaging-list .ff-image-close-filter {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 var(--ff-control-h, 30px) !important;
    justify-content: center !important;
    margin: 0 !important;
    min-width: var(--ff-control-h, 30px) !important;
    order: 2 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: var(--ff-control-h, 30px) !important;
}

body.ff-app .ff-imaging-list .ff-image-clear-filter {
    float: none !important;
    margin: 0 !important;
    min-width: 92px !important;
    order: 2 !important;
}

body.ff-app .ff-imaging-list .ff-image-search {
    float: none !important;
    margin: 0 !important;
    order: 3 !important;
}

body.ff-app .ff-imaging-list .ff-image-date-period-group {
    align-items: stretch !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    height: var(--ff-control-h) !important;
    max-width: 158px !important;
    min-height: var(--ff-control-h) !important;
    min-width: 0 !important;
    width: 158px !important;
}

body.ff-app .ff-imaging-list .ff-image-date-period-ignore {
    align-items: center !important;
    display: flex !important;
    height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    min-width: 0 !important;
    padding: 0 2px !important;
    width: 58px !important;
}

body.ff-app .ff-imaging-list .ff-image-date-period-ignore-label {
    display: block !important;
    font-size: 11px !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    margin: 0 !important;
    padding-left: 18px !important;
    position: relative !important;
    white-space: nowrap !important;
}

body.ff-app .ff-imaging-list .ff-image-date-period-select {
    height: var(--ff-control-h) !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    min-height: var(--ff-control-h) !important;
    min-width: 0 !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    width: 100% !important;
}

body.ff-app .ff-imaging-list .ff-image-date-range .range-picker {
    align-items: stretch !important;
    display: flex !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-imaging-list .ff-image-date-range .start-date,
body.ff-app .ff-imaging-list .ff-image-date-range .end-date {
    flex: 1 1 0 !important;
    min-width: 96px !important;
}

body.ff-app .ff-imaging-list .ff-image-date-range .input-icon,
body.ff-app .ff-imaging-list .ff-image-date-range .form-control {
    width: 100% !important;
}

body.ff-app .ff-imaging-list .ff-image-date-range .range-picker > .input-group-addon {
    align-items: center !important;
    display: flex !important;
    flex: 0 0 28px !important;
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-document-field,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-document-field {
    flex-basis: 175px !important;
    min-width: 135px !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-block,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-block {
    flex-basis: 412px !important;
    max-width: 445px !important;
    min-width: 330px !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-period,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period {
    flex-basis: 112px !important;
    max-width: 112px !important;
    min-width: 108px !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-period-group,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-group {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    max-width: 112px !important;
    width: 112px !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-period-ignore,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-ignore {
    width: 42px !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-period-ignore-label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-ignore-label {
    font-size: 9px !important;
    line-height: 1.1 !important;
    padding-left: 12px !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-period-select,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-select {
    padding-left: 3px !important;
    padding-right: 3px !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-range,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-range {
    flex-basis: 285px !important;
    max-width: 335px !important;
    min-width: 245px !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-branch-field,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-branch-field {
    flex-basis: 215px !important;
    max-width: 285px !important;
    min-width: 170px !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-user-field,
body.ff-app .ff-imaging-list.ff-view-compact .ff-image-webuser-field,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-user-field,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-webuser-field {
    flex-basis: 175px !important;
    max-width: 220px !important;
    min-width: 142px !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-actions-inline,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-actions-inline {
    min-width: 230px !important;
    padding-top: 13px !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-reference-row > .ff-image-courier-field,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-reference-row > .ff-image-courier-field {
    flex-basis: 132px !important;
    max-width: 150px !important;
    min-width: 110px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-imaging-list .ff-image-date-block {
    flex-basis: 430px !important;
    max-width: 465px !important;
    min-width: 330px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-imaging-list .ff-image-date-period {
    flex-basis: 124px !important;
    max-width: 124px !important;
    min-width: 118px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-group {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    max-width: 124px !important;
    width: 124px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-ignore {
    width: 48px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-ignore-label {
    font-size: 10px !important;
    padding-left: 14px !important;
}

@media (max-width: 760px) {
    body.ff-app .ff-imaging-list .ff-image-date-block,
    body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-block,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-block,
    body.ff-app .ff-imaging-list .ff-image-date-range,
    body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-range,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-range,
    body.ff-app .ff-imaging-list .ff-image-branch-field,
    body.ff-app .ff-imaging-list.ff-view-compact .ff-image-branch-field,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-branch-field {
        flex-basis: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* Debriefing: keep Trip Expenses compact and align SAVE with the filter SEARCH button. */
body.ff-app .ff-debriefing .ff-trip-expenses {
    margin-bottom: 4px !important;
    padding: 8px 12px 10px !important;
}

body.ff-app .ff-debriefing .ff-trip-expenses > legend {
    margin-bottom: 3px !important;
}

body.ff-app .ff-debriefing .ff-trip-expenses-row {
    align-items: flex-end !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
    margin: 0 !important;
}

body.ff-app .ff-debriefing .ff-trip-expenses-row::before,
body.ff-app .ff-debriefing .ff-trip-expenses-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-debriefing .ff-trip-expenses-row > [class*="col-"] {
    float: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-debriefing .ff-trip-expenses-field {
    flex: 1 1 138px !important;
    max-width: 175px !important;
    min-width: 120px !important;
}

body.ff-app .ff-debriefing .ff-trip-expenses-action {
    align-self: flex-end !important;
    flex: 0 0 120px !important;
}

body.ff-app .ff-debriefing .ff-trip-expenses .form-group {
    margin: 0 !important;
}

body.ff-app .ff-debriefing .ff-trip-expenses label {
    display: block !important;
    line-height: 18px !important;
    margin-bottom: 1px !important;
    min-height: 20px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-debriefing .ff-trip-expenses .form-control,
body.ff-app .ff-debriefing .ff-trip-expenses-save {
    box-sizing: border-box !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-debriefing .ff-trip-expenses-save {
    align-items: center !important;
    display: inline-flex !important;
    justify-content: center !important;
    margin: 0 !important;
    min-width: 120px !important;
    padding-bottom: 5px !important;
    padding-top: 5px !important;
}

/* View Quotes filter sizing: trim small fields and keep list controls on the same baseline. */
body.ff-app .ff-view-quotes .ff-waybill-filter-grid {
    align-items: start !important;
    grid-template-columns:
        minmax(108px, 112px)
        minmax(165px, 190px)
        minmax(146px, 158px)
        minmax(248px, 260px)
        minmax(180px, 220px) !important;
}

body.ff-app .ff-view-quotes .ff-waybill-filter-grid > .ff-filter-id,
body.ff-app .ff-view-quotes .ff-filter-client-row > .ff-filter-acc {
    flex: 0 1 112px !important;
    max-width: 112px !important;
    min-width: 108px !important;
}

body.ff-app .ff-view-quotes .ff-waybill-filter-grid > .ff-filter-date-period {
    max-width: 158px !important;
    min-width: 146px !important;
}

body.ff-app .ff-view-quotes .ff-filter-client-row > .ff-filter-client {
    flex: 1.3 1 312px !important;
    max-width: 430px !important;
    min-width: 270px !important;
}

body.ff-app .ff-view-quotes .ff-filter-client-row > .ff-filter-agent {
    flex: 1.15 1 273px !important;
    max-width: 355px !important;
    min-width: 235px !important;
}

body.ff-app .ff-view-quotes .ff-filter-flow-row,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid {
    gap: 6px 10px !important;
}

body.ff-app .ff-view-quotes .ff-filter-quote-row > .ff-filter-field {
    align-self: flex-start !important;
    padding-top: 0 !important;
}

body.ff-app .ff-view-quotes .ff-filter-quote-row > .ff-filter-field > .form-group {
    margin: 0 !important;
    min-height: 0 !important;
}

body.ff-app .ff-view-quotes .ff-filter-flow-row label,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid label {
    display: block !important;
    line-height: 18px !important;
    margin-bottom: 1px !important;
    min-height: 20px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-view-quotes .ff-filter-flow-row label.width100,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid label.width100 {
    align-items: flex-start !important;
    display: flex !important;
    gap: 6px !important;
    justify-content: space-between !important;
    min-width: 0 !important;
}

body.ff-app .ff-view-quotes .ff-filter-flow-row label.width100 > .pull-right.text-muted,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid label.width100 > .pull-right.text-muted {
    float: none !important;
    flex: 0 1 auto !important;
    line-height: 16px !important;
    margin-left: 6px !important;
    max-width: 50% !important;
    overflow: hidden !important;
    position: static !important;
    text-align: right !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app .ff-view-quotes .ff-filter-flow-row .ff-control,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid .ff-control,
body.ff-app .ff-view-quotes .ff-filter-flow-row .ui-select-container,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid .ui-select-container,
body.ff-app .ff-view-quotes .ff-filter-flow-row .form-control,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid .form-control,
body.ff-app .ff-view-quotes .ff-filter-flow-row .ui-select-bootstrap,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid .ui-select-bootstrap,
body.ff-app .ff-view-quotes .ff-filter-flow-row .ui-select-bootstrap > .ui-select-match,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid .ui-select-bootstrap > .ui-select-match {
    box-sizing: border-box !important;
    height: var(--ff-control-h) !important;
    margin-top: 0 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-quotes .ff-filter-flow-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-view-quotes .ff-filter-flow-row .ui-select-bootstrap > .ui-select-match > .ui-select-toggle,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid .ui-select-bootstrap > .ui-select-match > .ui-select-toggle {
    align-items: center !important;
    display: flex !important;
    height: var(--ff-control-h) !important;
    line-height: 1.2 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-view-quotes .ff-filter-flow-row .ui-select-bootstrap .ui-select-search,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-search {
    height: calc(var(--ff-control-h) - 2px) !important;
    line-height: 1.2 !important;
    max-height: calc(var(--ff-control-h) - 2px) !important;
    min-height: calc(var(--ff-control-h) - 2px) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-view-quotes .ff-filter-flow-row .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-view-quotes .ff-filter-flow-row .ui-select-bootstrap .ui-select-placeholder,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-placeholder {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* View Collections update panel: tighten the handoff to the grid toolbar and give key fields enough room. */
body.ff-app .ff-view-collections .ff-collection-update {
    margin-bottom: 2px !important;
    margin-top: 2px !important;
}

body.ff-app .ff-view-collections .ff-collection-update + .ff-grid-toolbar-row {
    margin-top: 0 !important;
}

body.ff-app .ff-view-collections .ff-collection-update-actions .ff-collection-field-clear {
    margin-left: auto !important;
}

body.ff-app .ff-view-collections .ff-collection-update-actions .ff-collection-field-button {
    margin-left: 0 !important;
}

body.ff-app .ff-view-collections .ff-collection-body > .row:has(.accordion-no-display) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-view-collections .ff-collection-body > .row:has(.accordion-no-display) + .ff-collection-update {
    margin-top: 2px !important;
}

body.ff-app .ff-view-collections .ff-grid-toolbar-row + .ff-collection-update,
body.ff-app .ff-view-collections .accordion-no-display + .ff-collection-update {
    margin-top: 2px !important;
}

@media (min-width: 641px) {
    body.ff-app .ff-view-collections .ff-collection-update .ff-collection-field-driver {
        flex: 0 1 210px !important;
        max-width: 235px !important;
        min-width: 178px !important;
    }

    body.ff-app .ff-view-collections .ff-collection-update .ff-collection-field-date {
        flex: 0 0 126px !important;
        max-width: 132px !important;
        min-width: 120px !important;
    }
}

/* View Collections compact edit/filter polish: keep the optional update panel usable in compact mode. */
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update {
    margin-bottom: 1px !important;
    margin-top: 1px !important;
    padding: 5px 10px 6px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update legend {
    font-size: 14px !important;
    line-height: 16px !important;
    margin-bottom: 3px !important;
    padding: 0 10px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update-fields {
    align-items: flex-end !important;
    gap: 4px 8px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update-actions {
    margin-top: 4px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-collection-field {
    gap: 1px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update label {
    font-size: 12px !important;
    height: 14px !important;
    line-height: 14px !important;
    margin: 0 !important;
    min-height: 14px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-control,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .form-control,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .input-icon,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-dx,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .dx-selectbox,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .dx-texteditor,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .dx-texteditor-container,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .dx-texteditor-input,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .dx-dropdowneditor-button,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-ui.ui-select-bootstrap {
    height: 28px !important;
    line-height: 26px !important;
    max-height: 28px !important;
    min-height: 28px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ui-select-bootstrap > .ui-select-match > .ui-select-toggle {
    align-items: center !important;
    display: flex !important;
    height: 28px !important;
    line-height: 26px !important;
    max-height: 28px !important;
    min-height: 28px !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-collection-field-driver,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-collection-field-vehicle {
    flex: 1 1 178px !important;
    max-width: 220px !important;
    min-width: 150px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-collection-field-cell {
    flex: 0 1 122px !important;
    max-width: 140px !important;
    min-width: 108px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-collection-field-date {
    flex: 0 1 124px !important;
    max-width: 132px !important;
    min-width: 118px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-collection-field-time {
    flex: 0 1 76px !important;
    max-width: 82px !important;
    min-width: 68px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-collection-field-note {
    flex: 1 1 250px !important;
    min-width: 210px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-collection-field-comment {
    flex: 1.5 1 285px !important;
    min-width: 230px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-collection-field-clear {
    flex: 0 0 140px !important;
    min-height: 28px !important;
    padding-bottom: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-collection-field-clear .checkbox {
    align-items: center !important;
    display: inline-flex !important;
    min-height: 28px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-collection-field-button {
    flex: 0 1 150px !important;
    margin-left: 0 !important;
    max-width: 170px !important;
    min-width: 132px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-btn {
    height: 28px !important;
    line-height: 26px !important;
    min-height: 28px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-date-range .range-picker .input-icon,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-collection-field-date .input-icon {
    position: relative !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-date-range .range-picker .input-icon > i.ti-calendar,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-collection-field-date .input-icon > i.ti-calendar {
    line-height: 1 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* View Collections grid header: give the select-all checkbox enough clearance in the column-name row. */
body.ff-app .ff-view-collections #gridContainer .dx-datagrid-headers .dx-header-row > td {
    height: 28px !important;
    min-height: 28px !important;
    overflow: visible !important;
    padding-bottom: 3px !important;
    padding-top: 3px !important;
}

body.ff-app .ff-view-collections #gridContainer .dx-datagrid-headers .dx-checkbox,
body.ff-app .ff-view-collections #gridContainer .dx-datagrid-headers .dx-checkbox-container {
    height: 18px !important;
    min-height: 18px !important;
}

/* Safety net for view/query pages: don't show a toolbar if its grid row is still hidden. */
body.ff-app .ff-query-grid-page .ff-grid-toolbar-row:has(+ .ff-grid-result-row.ng-hide) {
    display: none !important;
}

/* Waybill Stages: carry over accepted full-capture linked-button and compact field rhythm. */
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-client-row > .ff-stages-courier-action {
    flex: 0 0 34px !important;
    margin-left: -8px !important;
    max-width: 34px !important;
    padding-top: 18px !important;
    width: 34px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-courier-action .btn,
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-courier-action .dropdown-toggle,
body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-linked-menu-action .dropdown-toggle {
    height: var(--ff-control-h) !important;
    line-height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-linked-menu-action {
    padding-top: 18px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-additional-invoice-row {
    gap: 4px 0 !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-additional-invoice-row > .padding-left-0:not(.ff-linked-menu-action) {
    margin-left: 6px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill .ff-stages-capture .ff-stages-client-row > .ff-stages-courier-action,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill .ff-stages-capture .ff-additional-details .ff-linked-menu-action {
    padding-top: 13px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-basic-details {
    margin-bottom: 4px !important;
    padding-bottom: 6px !important;
    padding-top: 5px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-basic-details > .row {
    margin-bottom: 2px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-basic-details .form-group {
    margin-bottom: 1px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-basic-details label {
    line-height: 14px !important;
    margin-bottom: 1px !important;
    min-height: 14px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-basic-details .radio.clip-radio,
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-basic-details .checkbox.clip-check {
    margin-bottom: 1px !important;
    margin-top: 0 !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-basic-details .ff-ms {
    margin-bottom: 0 !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-basic-details .ff-stages-origin-field {
    padding-left: 0 !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field .form-group > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field .form-group > .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field label,
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field input.form-control {
    margin-left: 0 !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field [mapbox-geocoder],
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field .mapboxgl-ctrl-geocoder.mapboxgl-ctrl,
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field input.form-control {
    border-radius: var(--radius-sm) !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-step-nav {
    --ff-stages-nav-button-w: 120px;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-bottom-wb-label {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex !important;
    justify-content: center;
    max-width: var(--ff-stages-nav-button-w);
    min-width: var(--ff-stages-nav-button-w);
    overflow: hidden;
    text-align: center;
    width: var(--ff-stages-nav-button-w);
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-bottom-wb-label strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav::before,
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav > .btn,
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav > .ff-stages-bottom-wb-label {
    box-sizing: border-box !important;
    display: flex !important;
    float: none !important;
    justify-content: center !important;
    margin: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid > tbody > tr.ff-parcel-grid-entryrow > td {
    vertical-align: middle !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid > tbody > tr.ff-parcel-grid-entryrow > td > div {
    margin: 0 !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid > tbody > tr.ff-parcel-grid-entryrow input.form-control,
body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid > tbody > tr.ff-parcel-grid-entryrow .ui-select-container,
body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid > tbody > tr.ff-parcel-grid-entryrow .ui-select-bootstrap,
body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid > tbody > tr.ff-parcel-grid-entryrow .ui-select-match {
    display: block !important;
    height: 24px !important;
    margin: 0 !important;
    max-height: 24px !important;
    min-height: 24px !important;
}

/* Waybill Stages final polish: mirror the accepted full-capture pairing without changing full capture itself. */
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-capture-waybill {
    flex-basis: 392px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-id-row {
    gap: 18px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-capture-date {
    flex-basis: 136px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-capture-date label.width100 {
    gap: 10px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-capture-date label.width100 .pull-right {
    margin-left: auto !important;
}

/* Quote capture: let Quote Date and Quote # wrap independently instead of as one grouped block. */
body.ff-app .ff-waybill .ff-stages-capture.ff-stages-capture--quote .ff-stages-capture-waybill,
body.ff-app .ff-waybill .ff-stages-capture.ff-stages-capture--quote .ff-stages-id-row {
    display: contents !important;
}

body.ff-app .ff-waybill .ff-stages-capture.ff-stages-capture--quote .ff-stages-capture-date {
    flex: 0 0 136px !important;
    max-width: 142px !important;
    min-width: 128px !important;
}

body.ff-app .ff-waybill .ff-stages-capture.ff-stages-capture--quote .ff-stages-waybill-no {
    flex: 0 1 175px !important;
    max-width: 210px !important;
    min-width: 150px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-client-row > .ff-stages-courier-action {
    margin-left: -12px !important;
    padding-top: 14px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill .ff-stages-capture .ff-stages-client-row > .ff-stages-courier-action {
    padding-top: 10px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-courier-action .btn-group,
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-courier-action .dropdown-toggle,
body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-linked-menu-action .btn-group,
body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-linked-menu-action .dropdown-toggle {
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-courier-action .dropdown-toggle,
body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-linked-menu-action .dropdown-toggle {
    align-items: center !important;
    display: inline-flex !important;
    justify-content: center !important;
    padding: 0 !important;
}

body.ff-app:not([data-grid-density="compact"]) .ff-waybill .ff-stages-capture .ff-stages-courier-action .dropdown-toggle {
    height: calc(var(--ff-control-h) + 2px) !important;
    line-height: 1 !important;
    max-height: calc(var(--ff-control-h) + 2px) !important;
    min-height: calc(var(--ff-control-h) + 2px) !important;
}

body.ff-app:not([data-grid-density="compact"]) .ff-waybill .ff-stages-capture .ff-additional-details .ff-linked-menu-action {
    padding-top: 16px !important;
}

body.ff-app:not([data-grid-density="compact"]) .ff-waybill .ff-stages-capture .ff-additional-details .ff-linked-menu-action .dropdown-toggle {
    height: calc(var(--ff-control-h) - 2px) !important;
    line-height: 1 !important;
    max-height: calc(var(--ff-control-h) - 2px) !important;
    min-height: calc(var(--ff-control-h) - 2px) !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-additional-manifest-wrap .ff-additional-date-field {
    margin-left: 10px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-additional-meta-pair-row {
    gap: 4px 10px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill .ff-stages-capture .ff-additional-details .ff-linked-menu-action {
    padding-top: 11px !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid > tbody > tr.ff-parcel-grid-entryrow > td {
    padding-bottom: 5px !important;
    padding-top: 5px !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid .ui-select-bootstrap:not(.open) .ui-select-search {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid > tbody > tr.ff-parcel-grid-entryrow .ui-select-bootstrap > .ui-select-match > .btn {
    align-items: center !important;
    display: flex !important;
    height: 24px !important;
    line-height: 18px !important;
    max-height: 24px !important;
    min-height: 24px !important;
    overflow: hidden !important;
    padding-bottom: 2px !important;
    padding-top: 2px !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid > tbody > tr.ff-parcel-grid-entryrow .ui-select-bootstrap .ui-select-match-text {
    line-height: 18px !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid > tbody > tr.ff-parcel-grid-entryrow .ui-select-bootstrap .caret {
    align-self: center !important;
    margin-top: 0 !important;
}

/* Waybill Stages final alignment: linked buttons, parcel grid, rate footer, and address lookup stack. */
body.ff-app .ff-stages-top-ref-row {
    align-items: flex-start !important;
    clear: both !important;
    display: flex !important;
    justify-content: flex-start !important;
    margin: 0 0 -14px 4px !important;
    min-height: 22px !important;
    overflow: visible !important;
    pointer-events: none !important;
    position: relative !important;
    z-index: 30 !important;
}

body.ff-app .ff-stages-top-ref-row > .ff-stages-top-ref {
    align-items: center !important;
    display: inline-flex !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 4px 8px !important;
    pointer-events: auto !important;
    position: relative !important;
    white-space: nowrap !important;
    z-index: 31 !important;
}

body.ff-app #wizard.ff-stages-capture {
    clear: both !important;
    margin-top: 0 !important;
    overflow: visible !important;
    position: relative !important;
}

body.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-row {
    gap: 6px 10px !important;
}

body.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-row > .ff-pod-date-time {
    flex: 0 0 208px !important;
    min-width: 208px !important;
}

body.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-date-time-row {
    gap: 6px !important;
}

body.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-date-time-row > .ff-pod-date {
    flex: 0 0 112px !important;
    max-width: 112px !important;
    min-width: 112px !important;
}

body.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-date-time-row > .ff-pod-time {
    flex: 0 0 82px !important;
    min-width: 82px !important;
}

body.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-row > .ff-pod-person {
    flex: 0 1 135px !important;
    min-width: 128px !important;
}

body.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-row > .ff-pod-notes {
    flex: 1 1 168px !important;
    min-width: 155px !important;
}

body.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-row > .ff-pod-note-type {
    flex: 1 1 220px !important;
    min-width: 190px !important;
}

body.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-row > .ff-pod-action {
    align-items: flex-end !important;
    display: inline-flex !important;
    flex: 0 0 176px !important;
    gap: 6px !important;
    min-width: 176px !important;
    padding-top: 18px !important;
}

body.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-action .btn,
body.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-action > .btn {
    align-items: center !important;
    display: inline-flex !important;
    justify-content: center !important;
    margin-top: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-clear-action {
    gap: 5px !important;
    min-width: 72px !important;
    order: 1 !important;
}

body.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-save-action {
    min-width: 84px !important;
    order: 2 !important;
}

body.ff-app .ff-waybill .ff-stages-capture:not(.ff-stages-capture--quote) .ff-stages-client-row {
    column-gap: 16px !important;
    row-gap: 8px !important;
}

body.ff-app .ff-waybill .ff-stages-capture:not(.ff-stages-capture--quote) .ff-stages-client-name {
    flex: 0 1 clamp(320px, 35vw, 720px) !important;
    max-width: clamp(320px, 35vw, 720px) !important;
    min-width: 320px !important;
}

body.ff-app .ff-waybill .ff-stages-capture:not(.ff-stages-capture--quote) .ff-stages-capture-waybill {
    flex: 0 0 430px !important;
}

body.ff-app .ff-waybill .ff-stages-capture:not(.ff-stages-capture--quote) .ff-stages-capture-date {
    flex: 0 0 166px !important;
    max-width: 174px !important;
    min-width: 158px !important;
}

body.ff-app .ff-waybill .ff-stages-capture:not(.ff-stages-capture--quote) .ff-stages-capture-date label.width100 {
    justify-content: flex-start !important;
}

body.ff-app .ff-waybill .ff-stages-capture:not(.ff-stages-capture--quote) .ff-stages-capture-date label.width100 .pull-right {
    margin-left: 8px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-client-row > .ff-stages-courier-action {
    padding-top: 17px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill .ff-stages-capture .ff-stages-client-row > .ff-stages-courier-action {
    padding-top: 13px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill .ff-stages-capture .ff-additional-details .ff-linked-menu-action {
    padding-top: 13px !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid {
    min-width: 960px !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-pieces {
    width: 64px !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-qty {
    width: 54px !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-code {
    width: 96px !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-desc {
    width: clamp(168px, 18vw, 280px) !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-dim {
    width: 84px !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-volume,
body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-mass {
    width: 88px !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-value {
    width: 98px !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-action {
    width: 38px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav {
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 6px 0 4px !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav > .btn,
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav > .ff-stages-bottom-wb-label {
    box-sizing: border-box !important;
    float: none !important;
    margin: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav > .back-step {
    flex: 0 0 136px !important;
    order: 1 !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav > .ff-stages-bottom-wb-label {
    align-items: center !important;
    display: inline-flex !important;
    flex: 1 1 260px !important;
    height: 32px !important;
    justify-content: center !important;
    max-width: none !important;
    min-height: 32px !important;
    min-width: 220px !important;
    order: 2 !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-step-nav > .ff-stages-bottom-wb-label--plain {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--text) !important;
    display: block !important;
    float: none !important;
    height: auto !important;
    line-height: 1.2 !important;
    margin: 4px 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-step-nav > .ff-stages-bottom-wb-label--plain strong {
    color: inherit !important;
    display: inline !important;
    font-weight: 700 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav > .btn:not(.back-step):not(.next-step) {
    flex: 0 0 136px !important;
    order: 3 !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav > .next-step {
    flex: 0 0 136px !important;
    order: 4 !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field label {
    align-items: center !important;
    display: flex !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field label .pull-right {
    float: none !important;
    margin-left: auto !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field .form-group > .row:has([mapbox-geocoder]) {
    margin: 0 0 4px !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field [mapbox-geocoder] {
    display: block !important;
    margin: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field .mapboxgl-ctrl-geocoder.mapboxgl-ctrl {
    border-radius: var(--radius-sm) !important;
    overflow: hidden !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field .mapboxgl-ctrl-geocoder--input,
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field input#SAddr1,
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field input#RAddr1 {
    border-radius: var(--radius-sm) !important;
    margin-left: 0 !important;
    width: 100% !important;
}

@media (max-width: 720px) {
    body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav > .back-step,
    body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav > .btn:not(.back-step):not(.next-step),
    body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav > .next-step {
        flex: 1 1 calc(50% - 4px) !important;
    }

    body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav > .ff-stages-bottom-wb-label {
        flex: 1 1 100% !important;
        order: 2 !important;
    }
}

/* Waybill Stages service-rate selection: plain table, kept scoped to avoid DevExtreme grid cost. */
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table {
    background: var(--surface) !important;
    color: var(--text) !important;
    table-layout: fixed !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > thead > tr > th {
    background: var(--surface-3) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    font-weight: 700 !important;
    overflow: hidden !important;
    padding: 8px 10px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > tbody > tr > td {
    border-color: var(--border) !important;
    color: var(--text) !important;
    overflow: hidden !important;
    padding: 7px 10px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > thead > tr > th:nth-child(1),
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > tbody > tr > td:nth-child(1) {
    width: 20% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > thead > tr > th:nth-child(2),
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > tbody > tr > td:nth-child(2) {
    width: 5% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > thead > tr > th:nth-child(3),
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > tbody > tr > td:nth-child(3) {
    width: 17% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > thead > tr > th:nth-child(4),
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > tbody > tr > td:nth-child(4) {
    width: 7% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > thead > tr > th:nth-child(5),
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > tbody > tr > td:nth-child(5) {
    width: 6% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > thead > tr > th:nth-child(6),
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > tbody > tr > td:nth-child(6),
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > thead > tr > th:nth-child(7),
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > tbody > tr > td:nth-child(7),
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > thead > tr > th:nth-child(8),
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > tbody > tr > td:nth-child(8) {
    width: 7% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > thead > tr > th:nth-child(9),
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > tbody > tr > td:nth-child(9) {
    width: 8% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > thead > tr > th:nth-child(10),
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > tbody > tr > td:nth-child(10) {
    width: 5% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > thead > tr > th:nth-child(11),
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > tbody > tr > td:nth-child(11) {
    width: 11% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table.table-hover > tbody > tr.show-pointer:not(.row-selected):hover > td {
    background-color: color-mix(in srgb, var(--primary) 18%, var(--surface)) !important;
}

body.ff-app[data-theme="dark"] .ff-waybill .ff-stages-capture .ff-service-rate-table.table-hover > tbody > tr.show-pointer:not(.row-selected):hover > td {
    background-color: color-mix(in srgb, var(--primary) 28%, var(--surface-2)) !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-nav {
    --ff-service-rate-action-w: 136px;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-nav > .btn {
    flex: 0 0 var(--ff-service-rate-action-w) !important;
    max-width: var(--ff-service-rate-action-w) !important;
    min-width: var(--ff-service-rate-action-w) !important;
    width: var(--ff-service-rate-action-w) !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-nav--next,
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-nav--actions {
    justify-content: flex-end !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-nav--actions > .back-step {
    margin-right: auto !important;
}

/* Shared capture polish: keep parcel-grid dropdowns and placeholders aligned across capture pages. */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tbody > tr > td {
    vertical-align: middle !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tbody > tr > td > div {
    margin: 0 !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .ui-select-container,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .ui-select-bootstrap,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .ui-select-match {
    display: block !important;
    height: 24px !important;
    margin: 0 !important;
    max-height: 24px !important;
    min-height: 24px !important;
    vertical-align: middle !important;
}

body.ff-app .ff-page:not(.ff-login) .ui-select-bootstrap > .ui-select-match > .ui-select-toggle,
body.ff-app .ff-page:not(.ff-login) .ui-select-bootstrap > .ui-select-match > .btn {
    min-width: 0 !important;
    overflow: hidden !important;
}

body.ff-app .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-match-text span {
    max-width: 100% !important;
    min-width: 0 !important;
    width: auto !important;
}

body.ff-app .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-placeholder {
    flex: 0 1 auto !important;
    max-width: 100% !important;
    min-width: 72px !important;
    width: auto !important;
}

/* Waybill parcel grids: keep parcel description/code dropdowns above totals rows. */
body.ff-app .ff-waybill .ff-parcel-fieldset:has(table.ff-parcel-grid .ui-select-bootstrap.open),
body.ff-app .ff-waybill .ff-parcel-fieldset .container:has(table.ff-parcel-grid .ui-select-bootstrap.open),
body.ff-app .ff-waybill .ff-parcel-fieldset .row:has(table.ff-parcel-grid .ui-select-bootstrap.open),
body.ff-app .ff-waybill .ff-parcel-fieldset .table-wrapper:has(table.ff-parcel-grid .ui-select-bootstrap.open),
body.ff-app .ff-waybill .ff-parcel-grid-responsive:has(table.ff-parcel-grid .ui-select-bootstrap.open) {
    overflow: visible !important;
    position: relative !important;
    z-index: 2200 !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid:has(.ui-select-bootstrap.open) {
    overflow: visible !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tbody > tr > td:has(.ui-select-bootstrap.open) {
    overflow: visible !important;
    position: relative !important;
    z-index: 2300 !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .ui-select-bootstrap.open,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .ui-select-bootstrap.open .ui-select-choices,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .ui-select-bootstrap.open .ui-select-dropdown {
    z-index: 2400 !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid:has(.ui-select-bootstrap.open) > tfoot > tr > th,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid:has(.ui-select-bootstrap.open) > tfoot > tr > td {
    z-index: 0 !important;
}

/* Waybill Stages: align Additional Details manifest controls. */
body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-additional-manifest-list {
    flex: 0 0 15rem !important;
    margin-left: 10px !important;
    max-width: 15rem !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-additional-manifest-list .input-group {
    max-width: 15rem !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-additional-manifest-list .input-group > input.form-control {
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-additional-manifest-list .input-group > .input-group-btn {
    vertical-align: top !important;
    width: 34px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-additional-manifest-list .input-group > .input-group-btn > .dropdown-toggle {
    border-bottom-left-radius: 0 !important;
    border-left: 0 !important;
    border-top-left-radius: 0 !important;
    height: var(--ff-control-h) !important;
    line-height: 1 !important;
    margin-left: -1px !important;
    min-height: var(--ff-control-h) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 34px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill .ff-stages-capture .ff-additional-details .ff-linked-menu-action {
    padding-top: 16px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill .ff-stages-capture .ff-additional-details .ff-linked-menu-action {
    padding-top: 12px !important;
}

/* Quick Capture final sender/receiver controls: single checkbox row and wider lookup lists. */
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row {
    margin-bottom: 2px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row > .col-md-12 {
    flex: 1 1 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row .ff-quick-sender-options {
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0 14px !important;
    justify-content: flex-start !important;
    line-height: 18px !important;
    margin: 0 !important;
    min-height: 18px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row .ff-quick-sender-options .checkbox {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    height: 18px !important;
    line-height: 18px !important;
    margin: 0 !important;
    min-height: 18px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row .ff-quick-sender-options .checkbox label {
    line-height: 18px !important;
    min-height: 18px !important;
    padding-left: 22px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row {
    gap: 2px 10px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .ff-quick-sender-name-wrap,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .ff-quick-receiver-name-wrap {
    flex: 1 1 calc(50% - 5px) !important;
    min-width: 410px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-name-cell {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-switch-cell {
    flex: 0 0 30px !important;
    max-width: 30px !important;
    min-width: 30px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-cell {
    flex: 1 1 auto !important;
    min-width: 260px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-bill-receiver-cell {
    flex: 0 0 56px !important;
    max-width: 58px !important;
    min-width: 54px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-bill-receiver label {
    line-height: 18px !important;
    min-height: 18px !important;
    padding-left: 21px !important;
}

/* Quick Capture final winning override: sender/receiver lists should match Origin/Destination width. */
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .ff-quick-sender-name-wrap,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .ff-quick-receiver-name-wrap,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 {
    flex: 1 1 calc(50% - 5px) !important;
    min-width: 330px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-cell {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Quick Capture final top/party layout: keep option checkboxes tight and give sender/receiver lists full half-row width. */
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row > .ff-quick-top-options {
    align-self: flex-start !important;
    flex: 1 1 100% !important;
    margin-top: -2px !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-top: 0 !important;
    width: 100% !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture .ff-quick-route-party-row > .ff-quick-top-options {
    margin-top: -3px !important;
    padding-top: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row .ff-quick-sender-options {
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0 16px !important;
    justify-content: flex-start !important;
    line-height: 18px !important;
    margin: 0 !important;
    min-height: 18px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row .ff-quick-sender-options .checkbox {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    height: 18px !important;
    line-height: 18px !important;
    margin: 0 !important;
    min-height: 18px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row .ff-quick-sender-options .checkbox label {
    line-height: 18px !important;
    min-height: 18px !important;
    padding-left: 22px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row {
    gap: 2px 8px !important;
    position: relative !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .ff-quick-sender-name-wrap,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .ff-quick-receiver-name-wrap,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 {
    flex: 1 1 calc(50% - 4px) !important;
    max-width: none !important;
    min-width: 330px !important;
    width: calc(50% - 4px) !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-name-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-row {
    flex: 1 1 100% !important;
    position: relative !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-switch-cell {
    flex: 0 0 0 !important;
    left: -21px !important;
    max-width: 0 !important;
    min-width: 0 !important;
    padding-top: 16px !important;
    position: absolute !important;
    top: 0 !important;
    width: 0 !important;
    z-index: 2 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture .ff-quick-receiver-switch-cell {
    padding-top: 12px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-name-cell,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-cell {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
}

/* Quick Capture: keep top option checkboxes clear of the waybill field border. */
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row {
    row-gap: 5px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row > .ff-quick-top-options {
    margin-top: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture .ff-quick-route-party-row {
    row-gap: 6px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture .ff-quick-route-party-row > .ff-quick-top-options {
    margin-top: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-lock-label {
    align-items: center !important;
    display: flex !important;
    gap: 6px !important;
    justify-content: space-between !important;
    line-height: 18px !important;
    margin-bottom: 2px !important;
    padding-right: 45px !important;
}

body.ff-app .ff-waybill .ff-client-lock-label,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-town-label,
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-town-label,
body.ff-app .ff-waybill .ff-stages-capture .ff-full-service-lock-label {
    align-items: center !important;
    display: flex !important;
    gap: 6px !important;
    justify-content: space-between !important;
    line-height: 18px !important;
    margin-bottom: 2px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-label-actions,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-town-label-actions,
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-town-label-actions {
    align-items: center !important;
    display: inline-flex !important;
    gap: 4px !important;
    justify-content: flex-end !important;
    min-width: 67px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-hub-code,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-hub-code,
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-hub-code {
    display: inline-block !important;
    flex: 0 0 40px !important;
    max-width: 40px !important;
    min-width: 40px !important;
    overflow: hidden !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-lock,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-lock,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-lock,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-party-lock,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-client-lock,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-town-lock,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-service-lock,
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-party-lock,
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-client-lock,
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-town-lock {
    border-radius: 4px !important;
    flex: 0 0 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    min-width: 22px !important;
    width: 22px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-lock:not(.is-locked),
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-lock:not(.is-locked),
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-lock:not(.is-locked),
body.ff-app .ff-waybill.ff-full-capture .ff-quick-party-lock:not(.is-locked),
body.ff-app .ff-waybill.ff-full-capture .ff-quick-client-lock:not(.is-locked),
body.ff-app .ff-waybill.ff-full-capture .ff-quick-town-lock:not(.is-locked),
body.ff-app .ff-waybill.ff-full-capture .ff-quick-service-lock:not(.is-locked),
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-party-lock:not(.is-locked),
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-client-lock:not(.is-locked),
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-town-lock:not(.is-locked) {
    background: color-mix(in srgb, transparent 92%, var(--primary)) !important;
    border-color: color-mix(in srgb, var(--border) 62%, var(--primary)) !important;
    color: var(--primary) !important;
    opacity: 1 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-lock.is-locked,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-lock.is-locked,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-lock.is-locked,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-party-lock.is-locked,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-client-lock.is-locked,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-town-lock.is-locked,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-service-lock.is-locked,
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-party-lock.is-locked,
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-client-lock.is-locked,
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-town-lock.is-locked {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
    opacity: 1 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-lock i,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-lock i,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-lock i,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-party-lock i,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-client-lock i,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-town-lock i,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-service-lock i,
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-party-lock i,
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-client-lock i,
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-town-lock i {
    font-size: 12px !important;
}

body.ff-app .ff-waybill .ff-stages-capture legend .ff-stages-party-lock {
    margin-left: 6px !important;
    vertical-align: middle !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-service-lock-label {
    line-height: 18px !important;
    margin-bottom: 0 !important;
    min-height: 18px !important;
    padding-right: 42px !important;
    position: relative !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-service-lock-label .ff-quick-town-label-actions {
    line-height: 22px !important;
    min-height: 22px !important;
    position: absolute !important;
    right: 28px !important;
    top: -4px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-service-lock-label .ff-quick-service-lock {
    flex: 0 0 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
    width: 22px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-service-lock-label .ff-quick-service-lock i {
    font-size: 12px !important;
    line-height: 1 !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-grid-heading-row > .form-group.ff-manifest-wb-entry-row,
body.ff-app .ff-generate-manifest .ff-manifest-grid-heading-row > .row.ff-manifest-wb-entry-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-wb-entry-row > .ff-manifest-wb-entry-option,
body.ff-app .ff-generate-manifest .ff-manifest-wb-entry-row > .col-sm-2.ff-manifest-wb-entry-option {
    flex: 0 0 auto !important;
    float: none !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

/* Final quote capture override: keep linked quote actions compact, but let
   Collection # / Waybill # share the first Basic Details row when space allows. */
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-basic-docs,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-basic-docs > .row,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-basic-docs > .row > div:not([class]) {
    display: contents !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-basic-row .ff-full-quote-id-field {
    flex: 0 0 150px !important;
    max-width: 165px !important;
    min-width: 135px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-basic-docs > .row > .ff-full-quote-links,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-basic-docs > .row > div:not([class]) > .ff-full-quote-links,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-basic-row .ff-full-quote-links {
    align-self: flex-start !important;
    flex: 0 1 500px !important;
    max-width: 500px !important;
    min-width: 0 !important;
    order: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-links > .row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1px 12px !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-links > .row::before,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-links > .row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-link-group {
    align-items: flex-start !important;
    display: flex !important;
    flex: 0 1 382px !important;
    flex-wrap: nowrap !important;
    gap: 0 6px !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-links .form-group {
    margin-bottom: 0 !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-linked-field {
    flex: 0 1 115px !important;
    max-width: 130px !important;
    min-width: 105px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-linked-action {
    flex: 0 0 34px !important;
    margin-left: -6px !important;
    margin-top: 0 !important;
    max-width: 34px !important;
    min-width: 34px !important;
    padding: 20px 0 0 0 !important;
    width: 34px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-linked-action .btn-group,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-linked-action .dropdown-toggle {
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-linked-action .dropdown-toggle {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-convert-action {
    flex: 0 0 66px !important;
    max-width: 72px !important;
    min-width: 64px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 20px !important;
    width: 66px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-convert-action .btn {
    align-items: center !important;
    display: flex !important;
    height: var(--ff-control-h) !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    margin-top: 0 !important;
    min-height: var(--ff-control-h) !important;
    padding-bottom: 0 !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    padding-top: 0 !important;
    text-align: center !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-linked-action,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-convert-action {
    padding-top: 13px !important;
}

/* View Credits/Debits: keep compact finance date filters from overflowing into Branch. */
body.ff-app .ff-view-crdr .ff-finance-date-block {
    flex: 0 0 410px !important;
    max-width: 410px !important;
    min-width: 410px !important;
}

body.ff-app .ff-view-crdr .ff-finance-date-block > .row {
    flex-wrap: nowrap !important;
}

body.ff-app .ff-view-crdr .ff-finance-date-period.ff-filter-date-period {
    flex: 0 0 154px !important;
    max-width: 154px !important;
    min-width: 154px !important;
    width: 154px !important;
}

body.ff-app .ff-view-crdr .ff-finance-date-period.ff-filter-date-period .ff-date-period-group {
    max-width: 154px !important;
    width: 154px !important;
}

body.ff-app .ff-view-crdr .ff-finance-date-range {
    flex: 0 0 248px !important;
    max-width: 248px !important;
    min-width: 248px !important;
    width: 248px !important;
}

body.ff-app .ff-view-crdr .ff-finance-date-range .range-picker {
    max-width: 248px !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-view-crdr .ff-finance-date-range .range-picker .start-date,
body.ff-app .ff-view-crdr .ff-finance-date-range .range-picker .end-date {
    flex: 1 1 112px !important;
    max-width: 112px !important;
    min-width: 0 !important;
}

body.ff-app .ff-view-crdr .ff-finance-date-range .range-picker input.form-control[uib-datepicker-popup] {
    height: var(--ff-control-h) !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    max-width: 100% !important;
    min-height: var(--ff-control-h) !important;
    min-width: 0 !important;
}

body.ff-app .ff-view-crdr .ff-finance-date-range .range-picker .input-group-addon {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-crdr .ff-finance-date-range .range-picker .input-icon > i.ti-calendar {
    line-height: var(--ff-control-h) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-block {
    flex-basis: 382px !important;
    max-width: 382px !important;
    min-width: 382px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-period.ff-filter-date-period {
    flex-basis: 142px !important;
    max-width: 142px !important;
    min-width: 142px !important;
    width: 142px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-period.ff-filter-date-period .ff-date-period-group {
    max-width: 142px !important;
    width: 142px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-range {
    flex-basis: 232px !important;
    max-width: 232px !important;
    min-width: 232px !important;
    width: 232px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-range .range-picker {
    max-width: 232px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-range .range-picker .start-date,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-range .range-picker .end-date {
    flex-basis: 104px !important;
    max-width: 104px !important;
}

@media (max-width: 450px) {
    body.ff-app .ff-view-crdr .ff-finance-date-block,
    body.ff-app .ff-view-crdr .ff-finance-date-period.ff-filter-date-period,
    body.ff-app .ff-view-crdr .ff-finance-date-range,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-block,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-period.ff-filter-date-period,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-range {
        flex-basis: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    body.ff-app .ff-view-crdr .ff-finance-date-block > .row,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-block > .row {
        flex-wrap: wrap !important;
    }
}

/* Statement / Month End: compact responsive rows so controls do not overlap at narrower widths. */
body.ff-app .ff-statement .ff-statement-top-row,
body.ff-app .ff-statement .ff-statement-type-row,
body.ff-app .ff-statement .ff-statement-period-client-row,
body.ff-app .ff-statement .ff-statement-acc-row,
body.ff-app .ff-statement .ff-statement-email-row,
body.ff-app .ff-statement .ff-statement-process-row,
body.ff-app .ff-statement .ff-monthend-period-row,
body.ff-app .ff-statement .ff-monthend-report-row,
body.ff-app .ff-statement .ff-monthend-button-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-statement .ff-monthend-grid-row:not(.ng-hide) {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-statement .ff-statement-top-row::before,
body.ff-app .ff-statement .ff-statement-top-row::after,
body.ff-app .ff-statement .ff-statement-type-row::before,
body.ff-app .ff-statement .ff-statement-type-row::after,
body.ff-app .ff-statement .ff-statement-period-client-row::before,
body.ff-app .ff-statement .ff-statement-period-client-row::after,
body.ff-app .ff-statement .ff-statement-email-row::before,
body.ff-app .ff-statement .ff-statement-email-row::after,
body.ff-app .ff-statement .ff-monthend-report-row::before,
body.ff-app .ff-statement .ff-monthend-report-row::after,
body.ff-app .ff-statement .ff-monthend-button-row::before,
body.ff-app .ff-statement .ff-monthend-button-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-statement .ff-statement-top-row > [class*="col-"],
body.ff-app .ff-statement .ff-statement-period-client-row > [class*="col-"],
body.ff-app .ff-statement .ff-statement-acc-row > [class*="col-"],
body.ff-app .ff-statement .ff-statement-email-row > [class*="col-"],
body.ff-app .ff-statement .ff-statement-process-row > [class*="col-"],
body.ff-app .ff-statement .ff-monthend-period-row > [class*="col-"],
body.ff-app .ff-statement .ff-monthend-report-row > [class*="col-"],
body.ff-app .ff-statement .ff-monthend-button-row > [class*="col-"],
body.ff-app .ff-statement .ff-monthend-grid-row > [class*="col-"] {
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-statement .ff-statement-panel-col {
    flex: 1 1 640px !important;
    max-width: none !important;
}

body.ff-app .ff-statement .ff-monthend-panel-col {
    flex: 1 1 380px !important;
    max-width: none !important;
}

body.ff-app .ff-statement .ff-statement-options-fieldset,
body.ff-app .ff-statement .ff-monthend-fieldset,
body.ff-app .ff-statement .ff-statement-result-fieldset {
    margin-bottom: 6px !important;
    padding: 7px 10px 8px !important;
}

body.ff-app .ff-statement .ff-statement-options-fieldset > legend,
body.ff-app .ff-statement .ff-monthend-fieldset > legend,
body.ff-app .ff-statement .ff-statement-result-fieldset > legend {
    margin-bottom: 2px !important;
}

body.ff-app .ff-statement .form-group {
    margin-bottom: 3px !important;
}

body.ff-app .ff-statement label,
body.ff-app .ff-statement .checkbox label {
    line-height: 16px !important;
    margin-bottom: 1px !important;
    min-height: 16px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-statement .ff-statement-type-options {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 8px !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-statement .ff-statement-type-options .pull-right,
body.ff-app .ff-statement .ff-statement-type-options .valuesonly,
body.ff-app .ff-statement .ff-statement-type-options .checkbox,
body.ff-app .ff-statement .ff-statement-dormant-field .valuesonly,
body.ff-app .ff-statement .ff-statement-dormant-field .checkbox {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-statement .ff-statement-period-client-row {
    gap: 4px 12px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 20 !important;
}

body.ff-app .ff-statement .ff-statement-period-field {
    flex: 0 0 150px !important;
    max-width: 150px !important;
    min-width: 150px !important;
}

body.ff-app .ff-statement .ff-statement-period-field .start-date,
body.ff-app .ff-statement .ff-statement-period-field .input-icon,
body.ff-app .ff-statement .ff-statement-period-field #month {
    max-width: 140px !important;
    width: 140px !important;
}

body.ff-app .ff-statement .ff-statement-period-field .input-icon,
body.ff-app .ff-statement .ff-statement-period-field #month {
    height: 34px !important;
    min-height: 34px !important;
}

body.ff-app .ff-statement .ff-monthend-period-field {
    flex: 0 0 128px !important;
    max-width: 138px !important;
    min-width: 118px !important;
}

body.ff-app .ff-statement .ff-statement-client-field {
    flex: 1 1 360px !important;
    min-width: 250px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 21 !important;
}

body.ff-app .ff-statement .ff-statement-dormant-field {
    align-items: center !important;
    flex: 0 0 126px !important;
    max-width: 136px !important;
    padding-top: 17px !important;
}

body.ff-app .ff-statement .ff-statement-dormant-field:not(.ng-hide) {
    display: flex !important;
}

body.ff-app .ff-statement .ff-statement-client-field .ff-ms,
body.ff-app .ff-statement .ff-statement-client-field .btn-group,
body.ff-app .ff-statement .ff-statement-client-field .dropdown-toggle,
body.ff-app .ff-statement .ff-statement-client-field .dropdown-multiselect {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    width: 100% !important;
}

body.ff-app .ff-statement .ff-statement-client-field .dropdown-multiselect.open,
body.ff-app .ff-statement .ff-statement-client-field .multiselect-parent.open,
body.ff-app .ff-statement .ff-statement-client-field .ff-ms .multiselect-parent.open {
    z-index: 1200 !important;
}

body.ff-app .ff-statement .ff-statement-client-field .ff-ms .multiselect-parent > ul.dropdown-menu,
body.ff-app .ff-statement .ff-statement-client-field .dropdown-multiselect > ul.dropdown-menu {
    left: 0 !important;
    max-height: min(56vh, 420px) !important;
    min-width: 100% !important;
    overflow-y: auto !important;
    position: absolute !important;
    right: auto !important;
    top: 100% !important;
    width: 100% !important;
    z-index: 1201 !important;
}

body.ff-app .ff-statement .ff-statement-acc-field,
body.ff-app .ff-statement .ff-statement-invoice-list-field {
    flex: 1 1 100% !important;
}

body.ff-app .ff-statement .ff-statement-acc-field textarea,
body.ff-app .ff-statement .ff-statement-invoice-list-field textarea {
    height: 44px !important;
    min-height: 36px !important;
}

body.ff-app .ff-statement .ff-statement-email-row {
    gap: 4px 8px !important;
    position: relative !important;
    z-index: 1 !important;
}

body.ff-app .ff-statement .ff-statement-bcc-field,
body.ff-app .ff-statement .ff-statement-test-mail-field {
    flex: 1 1 240px !important;
    min-width: 185px !important;
}

body.ff-app .ff-statement .ff-statement-attachments-field {
    flex: 0 0 150px !important;
    max-width: 160px !important;
    min-width: 140px !important;
}

body.ff-app .ff-statement #bcc,
body.ff-app .ff-statement #test-email,
body.ff-app .ff-statement #attachments {
    max-width: 100% !important;
    min-width: 0 !important;
}

body.ff-app .ff-statement .ff-statement-process-field,
body.ff-app .ff-statement .ff-monthend-report-actions,
body.ff-app .ff-statement .ff-monthend-buttons {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px 8px !important;
    padding-bottom: 4px !important;
    padding-top: 2px !important;
}

body.ff-app .ff-statement .ff-statement-process-field .btn-group,
body.ff-app .ff-statement .ff-monthend-report-actions .btn-group {
    margin: 0 !important;
}

body.ff-app .ff-statement .ff-monthend-report-actions .checkbox,
body.ff-app .ff-statement .ff-monthend-report-actions .checkbox-inline {
    margin: 0 !important;
}

body.ff-app .ff-statement .ff-monthend-buttons .btn {
    margin: 0 !important;
    min-width: 118px;
}

body.ff-app .ff-statement .ff-monthend-grid-row {
    margin-top: 2px !important;
}

body.ff-app .ff-statement .ff-monthend-grid-col,
body.ff-app .ff-statement .ff-statement-result-section > .col-md-12,
body.ff-app .ff-statement .ff-grid-result-row > .col-md-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-statement .ff-grid-toolbar-row {
    margin-bottom: 2px !important;
}

body.ff-app .ff-statement .ff-grid-result-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-statement #gridContainer2 {
    min-height: calc(var(--ff-grid-row-height) * 8) !important;
}

@media (max-width: 760px) {
    body.ff-app .ff-statement .ff-statement-period-field,
    body.ff-app .ff-statement .ff-statement-client-field,
    body.ff-app .ff-statement .ff-statement-dormant-field,
    body.ff-app .ff-statement .ff-statement-bcc-field,
    body.ff-app .ff-statement .ff-statement-test-mail-field,
    body.ff-app .ff-statement .ff-statement-attachments-field,
    body.ff-app .ff-statement .ff-monthend-period-field {
        flex-basis: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body.ff-app .ff-statement .ff-statement-dormant-field {
        padding-top: 0 !important;
    }
}

/* Debtors view: compact the custom filter panel to match the shared query-grid standard. */
body.ff-app .ff-debtors .ff-debtors-filter-card {
    padding-bottom: 8px !important;
}

body.ff-app .ff-debtors .ff-debtors-filter-card > .ff-debtors-filter-grid,
body.ff-app .ff-debtors .ff-debtors-filter-card > .ff-debtors-list-row,
body.ff-app .ff-debtors .ff-debtors-filter-card > .ff-debtors-options-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 14px !important;
    margin: 0 0 6px !important;
}

body.ff-app .ff-debtors .ff-debtors-filter-card > .ff-debtors-filter-grid::before,
body.ff-app .ff-debtors .ff-debtors-filter-card > .ff-debtors-filter-grid::after,
body.ff-app .ff-debtors .ff-debtors-filter-card > .ff-debtors-list-row::before,
body.ff-app .ff-debtors .ff-debtors-filter-card > .ff-debtors-list-row::after,
body.ff-app .ff-debtors .ff-debtors-filter-card > .ff-debtors-options-row::before,
body.ff-app .ff-debtors .ff-debtors-filter-card > .ff-debtors-options-row::after {
    content: none !important;
}

body.ff-app .ff-debtors .ff-debtors-filter-card > .ff-debtors-filter-grid > [class*="col-"],
body.ff-app .ff-debtors .ff-debtors-filter-card > .ff-debtors-list-row > [class*="col-"],
body.ff-app .ff-debtors .ff-debtors-filter-card > .ff-debtors-options-row > [class*="col-"] {
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-debtors .ff-debtors-date-block {
    flex: 0 0 410px !important;
    max-width: 410px !important;
    min-width: 410px !important;
}

body.ff-app .ff-debtors .ff-debtors-date-block > .ff-filter-inline-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 0 !important;
}

body.ff-app .ff-debtors .ff-debtors-date-block > .ff-filter-inline-row::before,
body.ff-app .ff-debtors .ff-debtors-date-block > .ff-filter-inline-row::after {
    content: none !important;
}

body.ff-app .ff-debtors .ff-debtors-date-block > .ff-filter-inline-row > [class*="col-"] {
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-debtors .ff-finance-date-period.ff-filter-date-period {
    flex: 0 0 154px !important;
    max-width: 154px !important;
    min-width: 154px !important;
    width: 154px !important;
}

body.ff-app .ff-debtors .ff-finance-date-period.ff-filter-date-period .ff-date-period-group {
    max-width: 154px !important;
    width: 154px !important;
}

body.ff-app .ff-debtors .ff-debtors-date-range {
    flex: 0 0 248px !important;
    max-width: 248px !important;
    min-width: 248px !important;
    width: 248px !important;
}

body.ff-app .ff-debtors .ff-debtors-date-range .range-picker {
    display: flex !important;
    max-width: 248px !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-debtors .ff-debtors-date-range .range-picker .start-date,
body.ff-app .ff-debtors .ff-debtors-date-range .range-picker .end-date {
    flex: 1 1 112px !important;
    max-width: 112px !important;
    min-width: 0 !important;
}

body.ff-app .ff-debtors .ff-debtors-date-range .range-picker input.form-control[uib-datepicker-popup],
body.ff-app .ff-debtors .ff-debtors-date-range .range-picker .input-group-addon {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-debtors .ff-debtors-date-range .range-picker input.form-control[uib-datepicker-popup] {
    line-height: calc(var(--ff-control-h) - 2px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

body.ff-app .ff-debtors .ff-debtors-date-range .range-picker .input-icon > i.ti-calendar {
    line-height: var(--ff-control-h) !important;
}

body.ff-app .ff-debtors .ff-debtors-acc-field {
    flex: 0 0 132px !important;
    max-width: 132px !important;
    min-width: 112px !important;
}

body.ff-app .ff-debtors .ff-debtors-client-field {
    flex: 0 1 250px !important;
    max-width: 320px !important;
    min-width: 150px !important;
}

body.ff-app .ff-debtors .ff-debtors-branch-field {
    flex: 0 1 175px !important;
    max-width: 224px !important;
    min-width: 154px !important;
}

body.ff-app .ff-debtors .ff-debtors-list-field {
    flex: 0 1 150px !important;
    max-width: 174px !important;
    min-width: 94px !important;
}

body.ff-app .ff-debtors .ff-debtors-filter-card textarea.form-control.autoExpand {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    resize: vertical !important;
}

body.ff-app .ff-debtors .ff-debtors-show-dormant {
    align-self: flex-end !important;
    flex: 0 0 180px !important;
    max-width: 180px !important;
    min-width: 160px !important;
}

body.ff-app .ff-debtors .ff-debtors-show-dormant .checkbox {
    margin: 0 !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-debtors .ff-debtors-options-field {
    flex: 0 1 486px !important;
    max-width: 506px !important;
    min-width: 430px !important;
}

body.ff-app .ff-debtors .ff-debtors-trans-field {
    flex: 0 1 330px !important;
    max-width: 350px !important;
    min-width: 320px !important;
}

body.ff-app .ff-debtors .ff-debtors-clear-field {
    align-self: flex-start !important;
    display: flex !important;
    flex: 0 0 130px !important;
    max-width: 130px !important;
    min-width: 130px !important;
    padding-top: 28px !important;
}

body.ff-app .ff-debtors .ff-debtors-actions-field {
    align-self: flex-start !important;
    display: flex !important;
    flex: 1 1 320px !important;
    justify-content: flex-end !important;
    max-width: none !important;
    min-width: 300px !important;
    padding-top: 28px !important;
}

body.ff-app .ff-debtors .ff-debtors-inline-fieldset {
    margin: 0 !important;
    min-height: 0 !important;
    padding: 12px 10px 7px !important;
    width: 100% !important;
}

body.ff-app .ff-debtors .ff-debtors-inline-fieldset > legend {
    margin-bottom: 2px !important;
}

body.ff-app .ff-debtors .ff-debtors-checkbox-row {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-debtors .ff-debtors-checkbox-row .checkbox,
body.ff-app .ff-debtors .ff-debtors-checkbox-row .checkbox-inline {
    align-items: center !important;
    display: inline-flex !important;
    margin: 0 !important;
    min-height: var(--ff-control-h) !important;
    padding-left: 0 !important;
}

body.ff-app .ff-debtors .ff-debtors-checkbox-row .clip-check label,
body.ff-app .ff-debtors .ff-debtors-show-dormant .clip-check label,
body.ff-app .ff-debtors .ff-debtors-actions-row .clip-check label,
body.ff-app .ff-debtors .ff-debtors-actions-field .clip-check label {
    align-items: center !important;
    display: inline-flex !important;
    line-height: var(--ff-control-h) !important;
    margin: 0 !important;
    min-height: var(--ff-control-h) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    white-space: nowrap !important;
}

body.ff-app .ff-debtors .ff-debtors-checkbox-row .clip-check label::before,
body.ff-app .ff-debtors .ff-debtors-checkbox-row .clip-check label::after,
body.ff-app .ff-debtors .ff-debtors-show-dormant .clip-check label::before,
body.ff-app .ff-debtors .ff-debtors-show-dormant .clip-check label::after,
body.ff-app .ff-debtors .ff-debtors-actions-field .clip-check label::before,
body.ff-app .ff-debtors .ff-debtors-actions-field .clip-check label::after {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

body.ff-app .ff-debtors .ff-debtors-attachments {
    align-items: center !important;
    display: inline-flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    margin: 0 !important;
    min-width: 190px !important;
}

body.ff-app .ff-debtors .ff-debtors-attachments label {
    flex: 0 0 auto !important;
    height: auto !important;
    line-height: var(--ff-control-h) !important;
    margin: 0 !important;
    min-height: 0 !important;
}

body.ff-app .ff-debtors .ff-debtors-attachments input {
    flex: 0 0 64px !important;
    width: 64px !important;
}

body.ff-app .ff-debtors .ff-debtors-actions-row {
    margin: 0 !important;
}

body.ff-app .ff-debtors .ff-debtors-actions-row .ff-filter-actions {
    align-items: center !important;
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-end !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-debtors .ff-debtors-actions-row .ff-filter-keep-open,
body.ff-app .ff-debtors .ff-debtors-actions-row .ff-filter-search,
body.ff-app .ff-debtors .ff-debtors-actions-field .ff-filter-keep-open,
body.ff-app .ff-debtors .ff-debtors-actions-field .ff-filter-close,
body.ff-app .ff-debtors .ff-debtors-actions-field .ff-filter-search {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-debtors .ff-debtors-actions-field .ff-filter-actions {
    align-items: center !important;
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    min-height: var(--ff-control-h) !important;
    padding: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-debtors .ff-debtors-actions-field .ff-filter-keep-open {
    align-items: center !important;
    display: inline-flex !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-debtors .ff-debtors-actions-field .ff-filter-close {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 var(--ff-control-h) !important;
    justify-content: center !important;
    min-width: var(--ff-control-h) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: var(--ff-control-h) !important;
}

body.ff-app .ff-debtors .ff-debtors-actions-field .ff-filter-search {
    flex: 0 0 180px !important;
    width: 180px !important;
}

body.ff-app .ff-debtors .ff-debtors-clear-field .ff-filter-clear {
    flex: 0 0 130px !important;
    float: none !important;
    margin: 0 !important;
    width: 130px !important;
}

body.ff-app .ff-debtors .ff-debtors-results {
    border: 0 !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-debtors .ff-debtors-date-block {
    flex-basis: 382px !important;
    max-width: 382px !important;
    min-width: 382px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-debtors .ff-finance-date-period.ff-filter-date-period {
    flex-basis: 142px !important;
    max-width: 142px !important;
    min-width: 142px !important;
    width: 142px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-debtors .ff-finance-date-period.ff-filter-date-period .ff-date-period-group {
    max-width: 142px !important;
    width: 142px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-debtors .ff-debtors-date-range {
    flex-basis: 232px !important;
    max-width: 232px !important;
    min-width: 232px !important;
    width: 232px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-debtors .ff-debtors-date-range .range-picker {
    max-width: 232px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-debtors .ff-debtors-date-range .range-picker .start-date,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-debtors .ff-debtors-date-range .range-picker .end-date {
    flex-basis: 104px !important;
    max-width: 104px !important;
}

@media (max-width: 900px) {
    body.ff-app .ff-debtors .ff-debtors-date-block,
    body.ff-app .ff-debtors .ff-debtors-list-field,
    body.ff-app .ff-debtors .ff-debtors-options-field,
    body.ff-app .ff-debtors .ff-debtors-trans-field,
    body.ff-app .ff-debtors .ff-debtors-clear-field,
    body.ff-app .ff-debtors .ff-debtors-actions-field,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-debtors .ff-debtors-date-block {
        flex-basis: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    body.ff-app .ff-debtors .ff-debtors-checkbox-row {
        flex-wrap: wrap !important;
    }
}

@media (max-width: 1120px) {
    body.ff-app .ff-debtors .ff-debtors-clear-field {
        padding-top: 0 !important;
    }

    body.ff-app .ff-debtors .ff-debtors-actions-field {
        flex-basis: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        padding-top: 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 450px) {
    body.ff-app .ff-debtors .ff-debtors-date-block > .ff-filter-inline-row {
        flex-wrap: wrap !important;
    }

    body.ff-app .ff-debtors .ff-finance-date-period.ff-filter-date-period,
    body.ff-app .ff-debtors .ff-debtors-date-range,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-debtors .ff-finance-date-period.ff-filter-date-period,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-debtors .ff-debtors-date-range {
        flex-basis: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* View Payments: align and compact the shared finance filter for payment searches. */
body.ff-app .ff-view-payments .ff-sr-card {
    padding-bottom: 8px !important;
}

body.ff-app .ff-view-payments .ff-finance-primary-filters,
body.ff-app .ff-view-payments .ff-finance-secondary-filters,
body.ff-app .ff-view-payments .ff-finance-payment-options-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    margin: 0 0 6px !important;
}

body.ff-app .ff-view-payments .ff-finance-primary-filters::before,
body.ff-app .ff-view-payments .ff-finance-primary-filters::after,
body.ff-app .ff-view-payments .ff-finance-secondary-filters::before,
body.ff-app .ff-view-payments .ff-finance-secondary-filters::after,
body.ff-app .ff-view-payments .ff-finance-payment-options-row::before,
body.ff-app .ff-view-payments .ff-finance-payment-options-row::after,
body.ff-app .ff-view-payments .ff-finance-date-block > .row::before,
body.ff-app .ff-view-payments .ff-finance-date-block > .row::after,
body.ff-app .ff-view-payments .ff-finance-user-row::before,
body.ff-app .ff-view-payments .ff-finance-user-row::after {
    content: none !important;
}

body.ff-app .ff-view-payments .ff-finance-primary-filters > [class*="col-"],
body.ff-app .ff-view-payments .ff-finance-secondary-filters > [class*="col-"],
body.ff-app .ff-view-payments .ff-finance-payment-options-row > [class*="col-"],
body.ff-app .ff-view-payments .ff-finance-date-block > .row > [class*="col-"],
body.ff-app .ff-view-payments .ff-finance-user-row > [class*="col-"] {
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-view-payments .ff-finance-primary-filters > .ff-finance-payment-id {
    flex: 0 0 120px !important;
    max-width: 126px !important;
    min-width: 112px !important;
}

body.ff-app .ff-view-payments .ff-finance-date-block {
    flex: 0 0 410px !important;
    max-width: 410px !important;
    min-width: 410px !important;
}

body.ff-app .ff-view-payments .ff-finance-date-block > .row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 0 !important;
}

body.ff-app .ff-view-payments .ff-finance-date-period.ff-filter-date-period {
    flex: 0 0 154px !important;
    max-width: 154px !important;
    min-width: 154px !important;
    width: 154px !important;
}

body.ff-app .ff-view-payments .ff-finance-date-period.ff-filter-date-period .ff-date-period-group {
    max-width: 154px !important;
    width: 154px !important;
}

body.ff-app .ff-view-payments .ff-finance-date-range {
    flex: 0 0 248px !important;
    max-width: 248px !important;
    min-width: 248px !important;
    width: 248px !important;
}

body.ff-app .ff-view-payments .ff-finance-date-range .range-picker {
    display: flex !important;
    max-width: 248px !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-view-payments .ff-finance-date-range .range-picker .start-date,
body.ff-app .ff-view-payments .ff-finance-date-range .range-picker .end-date {
    flex: 1 1 112px !important;
    max-width: 112px !important;
    min-width: 0 !important;
}

body.ff-app .ff-view-payments .ff-finance-date-range .range-picker input.form-control[uib-datepicker-popup],
body.ff-app .ff-view-payments .ff-finance-date-range .range-picker .input-group-addon {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-payments .ff-finance-date-range .range-picker input.form-control[uib-datepicker-popup] {
    line-height: calc(var(--ff-control-h) - 2px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

body.ff-app .ff-view-payments .ff-finance-date-range .range-picker .input-icon > i.ti-calendar {
    line-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-payments .ff-finance-branch-filter {
    flex: 0 1 230px !important;
    max-width: 260px !important;
    min-width: 185px !important;
}

body.ff-app .ff-view-payments .ff-finance-client-filter {
    flex: 1 1 390px !important;
    max-width: 520px !important;
    min-width: 300px !important;
}

body.ff-app .ff-view-payments .ff-finance-batch-filter,
body.ff-app .ff-view-payments .ff-finance-waybill-filter,
body.ff-app .ff-view-payments .ff-finance-ref-filter,
body.ff-app .ff-view-payments .ff-finance-acc-filter,
body.ff-app .ff-view-payments .ff-payment-group-field,
body.ff-app .ff-view-payments .ff-payment-order-field {
    flex: 0 0 132px !important;
    max-width: 142px !important;
    min-width: 112px !important;
}

body.ff-app .ff-view-payments .ff-finance-user-group {
    flex: 1 1 520px !important;
    max-width: 640px !important;
    min-width: 420px !important;
}

body.ff-app .ff-view-payments .ff-finance-user-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin: 0 !important;
}

body.ff-app .ff-view-payments .ff-finance-user-filter,
body.ff-app .ff-view-payments .ff-finance-webuser-filter {
    flex: 1 1 185px !important;
    min-width: 160px !important;
}

body.ff-app .ff-view-payments .ff-payment-unsettled-field,
body.ff-app .ff-view-payments .ff-payment-show-dormant-field {
    align-self: flex-end !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-payments .ff-payment-unsettled-field {
    flex: 0 0 125px !important;
    max-width: 130px !important;
    min-width: 110px !important;
}

body.ff-app .ff-view-payments .ff-payment-show-dormant-field {
    flex: 0 0 150px !important;
    max-width: 160px !important;
    min-width: 140px !important;
}

body.ff-app .ff-view-payments .ff-payment-unsettled-field .checkbox,
body.ff-app .ff-view-payments .ff-payment-show-dormant-field .checkbox {
    margin: 0 !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-payments .ff-finance-payment-actions-row {
    margin: 0 !important;
}

body.ff-app .ff-view-payments .ff-finance-payment-actions {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 12px !important;
    justify-content: flex-end !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-view-payments .ff-finance-payment-actions .valuesonly,
body.ff-app .ff-view-payments .ff-finance-payment-actions .checkbox,
body.ff-app .ff-view-payments .ff-finance-payment-actions .btn,
body.ff-app .ff-view-payments .ff-payment-unsettled-field .checkbox,
body.ff-app .ff-view-payments .ff-payment-show-dormant-field .checkbox {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-view-payments .ff-finance-payment-actions .ff-finance-keep-filter {
    margin-left: auto !important;
}

body.ff-app .ff-view-payments .ff-finance-payment-actions .ff-finance-close-filter {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 var(--ff-control-h) !important;
    justify-content: center !important;
    min-width: var(--ff-control-h) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: var(--ff-control-h) !important;
}

body.ff-app .ff-view-payments .ff-finance-payment-actions .clip-check,
body.ff-app .ff-view-payments .ff-payment-unsettled-field .clip-check,
body.ff-app .ff-view-payments .ff-payment-show-dormant-field .clip-check {
    align-items: center !important;
    display: inline-flex !important;
    height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-payments .ff-finance-payment-actions .clip-check label,
body.ff-app .ff-view-payments .ff-payment-unsettled-field .clip-check label,
body.ff-app .ff-view-payments .ff-payment-show-dormant-field .clip-check label {
    align-items: center !important;
    display: inline-flex !important;
    height: var(--ff-control-h) !important;
    line-height: var(--ff-control-h) !important;
    margin: 0 !important;
    min-height: var(--ff-control-h) !important;
    padding-top: 0 !important;
    white-space: nowrap !important;
}

body.ff-app .ff-view-payments .ff-finance-payment-actions .clip-check label::before,
body.ff-app .ff-view-payments .ff-finance-payment-actions .clip-check label:before,
body.ff-app .ff-view-payments .ff-payment-unsettled-field .clip-check label::before,
body.ff-app .ff-view-payments .ff-payment-unsettled-field .clip-check label:before,
body.ff-app .ff-view-payments .ff-payment-show-dormant-field .clip-check label::before,
body.ff-app .ff-view-payments .ff-payment-show-dormant-field .clip-check label:before {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

body.ff-app .ff-view-payments .ff-finance-payment-actions .clip-check input[type="checkbox"]:checked + label::after,
body.ff-app .ff-view-payments .ff-finance-payment-actions .clip-check input[type="checkbox"]:checked + label:after,
body.ff-app .ff-view-payments .ff-payment-unsettled-field .clip-check input[type="checkbox"]:checked + label::after,
body.ff-app .ff-view-payments .ff-payment-unsettled-field .clip-check input[type="checkbox"]:checked + label:after,
body.ff-app .ff-view-payments .ff-payment-show-dormant-field .clip-check input[type="checkbox"]:checked + label::after,
body.ff-app .ff-view-payments .ff-payment-show-dormant-field .clip-check input[type="checkbox"]:checked + label:after {
    line-height: 19px !important;
    text-align: center !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-payments .ff-finance-date-block {
    flex-basis: 382px !important;
    max-width: 382px !important;
    min-width: 382px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-payments .ff-finance-date-period.ff-filter-date-period {
    flex-basis: 142px !important;
    max-width: 142px !important;
    min-width: 142px !important;
    width: 142px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-payments .ff-finance-date-period.ff-filter-date-period .ff-date-period-group {
    max-width: 142px !important;
    width: 142px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-payments .ff-finance-date-range {
    flex-basis: 232px !important;
    max-width: 232px !important;
    min-width: 232px !important;
    width: 232px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-payments .ff-finance-date-range .range-picker {
    max-width: 232px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-payments .ff-finance-date-range .range-picker .start-date,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-payments .ff-finance-date-range .range-picker .end-date {
    flex-basis: 104px !important;
    max-width: 104px !important;
}

@media (max-width: 900px) {
    body.ff-app .ff-view-payments .ff-finance-date-block,
    body.ff-app .ff-view-payments .ff-finance-client-filter,
    body.ff-app .ff-view-payments .ff-finance-user-group,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-payments .ff-finance-date-block {
        flex-basis: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    body.ff-app .ff-view-payments .ff-finance-user-row {
        flex-wrap: wrap !important;
    }
}

@media (max-width: 450px) {
    body.ff-app .ff-view-payments .ff-finance-date-block > .row {
        flex-wrap: wrap !important;
    }

    body.ff-app .ff-view-payments .ff-finance-date-period.ff-filter-date-period,
    body.ff-app .ff-view-payments .ff-finance-date-range,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-payments .ff-finance-date-period.ff-filter-date-period,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-payments .ff-finance-date-range {
        flex-basis: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* Generate Manifest/Invoice: override compact default grid shells so result grids are not clipped. */
body.ff-app .ff-page:is(.ff-generate-invoice, .ff-generate-manifest) .ff-grid-result-row:not(.ng-hide),
body.ff-app .ff-page:is(.ff-generate-invoice, .ff-generate-manifest) .ff-grid-result-row:not(.ng-hide) > .col-md-12 {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

body.ff-app .ff-generate-invoice :is(.ff-invoice-generate-client-grid, .ff-invoice-generate-waybill-grid) {
    margin-bottom: 0 !important;
}

body.ff-app .ff-generate-invoice :is(#clientGridContainer, #waybillGridContainer) {
    height: clamp(520px, calc(100vh - 238px), 1320px) !important;
    max-height: none !important;
    min-height: 520px !important;
    overflow: hidden !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-generate-invoice :is(#clientGridContainer, #waybillGridContainer) {
    height: clamp(540px, calc(100vh - 218px), 1360px) !important;
    min-height: 540px !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-grid-panel .panel-body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

body.ff-app .ff-generate-manifest #gridContainer {
    height: auto !important;
    max-height: none !important;
    min-height: calc(var(--ff-grid-row-height) * 3) !important;
    overflow: visible !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-generate-manifest #gridContainer {
    height: auto !important;
    min-height: calc(var(--ff-grid-row-height) * 3) !important;
}

body.ff-app .ff-generate-invoice :is(#clientGridContainer, #waybillGridContainer) .dx-datagrid {
    height: 100% !important;
    max-height: 100% !important;
}

body.ff-app .ff-generate-manifest #gridContainer .dx-datagrid {
    height: auto !important;
    max-height: none !important;
    min-height: calc(var(--ff-grid-row-height) * 3) !important;
}

/* Payment capture: compact, page-specific alignment without affecting View Payments. */
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    margin-bottom: 4px !important;
    row-gap: 2px !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .row > [class*="col-md-"] {
    float: none !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .form-group {
    margin-bottom: 4px !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .form-group > label {
    align-items: baseline !important;
    display: inline-flex !important;
    line-height: 16px !important;
    margin: 0 0 2px !important;
    min-height: 16px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-payment-capture .ff-payment-posted-status {
    align-items: flex-start !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 0 !important;
    padding-top: 18px !important;
}

body.ff-app .ff-payment-capture .ff-payment-posted-status .label {
    align-items: center !important;
    display: inline-flex !important;
    justify-content: center !important;
    min-height: var(--ff-control-h, 40px) !important;
    padding: 0 12px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset label:has(.symbol.required) .symbol.required {
    display: inline-flex !important;
    height: auto !important;
    margin-left: 2px !important;
    position: static !important;
    transform: none !important;
    vertical-align: baseline !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset label:has(.symbol.required) .symbol.required::before {
    line-height: 1 !important;
    position: static !important;
}

body.ff-app .ff-payment-capture .ff-payment-id-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-payment-capture .ff-payment-id-row > .ff-payment-id-field {
    flex: 1 1 0 !important;
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-main-row .form-group {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

body.ff-app .ff-payment-capture .ff-payment-amount-field .input-group,
body.ff-app .ff-payment-capture .ff-payment-balance-field .input-group {
    width: 100% !important;
}

body.ff-app .ff-payment-capture .ff-payment-balance-group > .row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-payment-capture .ff-payment-balance-group .ff-payment-balance-field {
    flex: 1 1 0 !important;
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-inline-checkboxes > .row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 14px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-payment-capture .ff-payment-checkbox-cell,
body.ff-app .ff-payment-capture .ff-payment-show-dormant-cell,
body.ff-app .ff-payment-capture [class*="col-"]:has(> .checkbox.clip-check) {
    margin-top: 0 !important;
    padding-top: 15px !important;
}

body.ff-app .ff-payment-capture .ff-payment-checkbox-cell {
    flex: 0 0 auto !important;
    float: none !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-show-dormant-cell {
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .checkbox.clip-check {
    display: inline-flex !important;
    margin: 0 !important;
    min-height: 20px !important;
    vertical-align: middle !important;
}

body.ff-app .ff-payment-capture .checkbox.clip-check label {
    line-height: 20px !important;
    margin: 0 !important;
    min-height: 20px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-payment-capture .valuesonly {
    display: inline-flex !important;
    margin-left: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset > .row {
    margin-bottom: 2px !important;
    row-gap: 1px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset .form-group {
    margin-bottom: 2px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset .form-group > label {
    line-height: 14px !important;
    margin-bottom: 1px !important;
    min-height: 14px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .bootstrap-touchspin {
    align-items: stretch !important;
    display: flex !important;
    width: 100% !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .bootstrap-touchspin .bootstrap-touchspin-prefix {
    align-items: center !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: var(--ff-control-font-size, 11px) !important;
    font-weight: 400 !important;
    height: var(--ff-control-h) !important;
    justify-content: center !important;
    line-height: 1 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding: 0 5px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .bootstrap-touchspin .form-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 1% !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .checkbox.clip-check label::after {
    left: 2px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-reference-row > .ff-payment-balance-group {
    flex: 0 0 33.33333333% !important;
    max-width: 33.33333333% !important;
    width: 33.33333333% !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-balance-group .ff-payment-balance-field {
    flex: 0 0 calc((100% - 16px) / 2) !important;
    max-width: calc((100% - 16px) / 2) !important;
    width: calc((100% - 16px) / 2) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-checkbox-cell,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-show-dormant-cell,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture [class*="col-"]:has(> .checkbox.clip-check) {
    padding-top: 11px !important;
}

/* Payment capture final alignment lock: keep the amount and balance columns identical. */
body.ff-app .ff-payment-capture .ff-payment-main-row,
body.ff-app .ff-payment-capture .ff-payment-reference-row {
    align-items: start !important;
    column-gap: 16px !important;
    display: grid !important;
    grid-template-columns: minmax(350px, 4fr) minmax(260px, 4fr) minmax(170px, 2fr) minmax(170px, 2fr) !important;
    row-gap: 2px !important;
}

body.ff-app .ff-payment-capture .ff-payment-main-row::before,
body.ff-app .ff-payment-capture .ff-payment-main-row::after,
body.ff-app .ff-payment-capture .ff-payment-reference-row::before,
body.ff-app .ff-payment-capture .ff-payment-reference-row::after,
body.ff-app .ff-payment-capture .ff-payment-balance-group > .row::before,
body.ff-app .ff-payment-capture .ff-payment-balance-group > .row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-payment-capture .ff-payment-main-row > [class*="col-md-"],
body.ff-app .ff-payment-capture .ff-payment-reference-row > [class*="col-md-"] {
    float: none !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-id-row {
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
}

body.ff-app .ff-payment-capture .ff-payment-id-row > .ff-payment-id-field {
    flex: 1 1 108px !important;
    min-width: 108px !important;
}

body.ff-app .ff-payment-capture .ff-payment-client-field {
    align-self: start !important;
}

body.ff-app .ff-payment-capture .ff-payment-client-field .ui-select-container,
body.ff-app .ff-payment-capture .ff-payment-client-field .ui-select-bootstrap,
body.ff-app .ff-payment-capture .ff-payment-client-field .ui-select-bootstrap > .ui-select-match,
body.ff-app .ff-payment-capture .ff-payment-client-field .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-payment-capture .ff-payment-client-field .ui-select-bootstrap > .ui-select-match > .ui-select-toggle {
    margin-top: 0 !important;
}

body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8 {
    grid-column: 1 / span 2 !important;
}

body.ff-app .ff-payment-capture .ff-payment-reference-row > .ff-payment-balance-group {
    flex: none !important;
    grid-column: 3 / span 2 !important;
    max-width: none !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-balance-group > .row {
    column-gap: 16px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    row-gap: 2px !important;
}

body.ff-app .ff-payment-capture .ff-payment-balance-group .ff-payment-balance-field {
    float: none !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .bootstrap-touchspin {
    align-items: stretch !important;
    display: flex !important;
    width: 100% !important;
}

body.ff-app .ff-payment-capture .bootstrap-touchspin .form-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 1% !important;
}

body.ff-app .ff-payment-capture .bootstrap-touchspin .input-group-addon.bootstrap-touchspin-prefix {
    align-items: center !important;
    display: inline-flex !important;
    font-size: var(--ff-control-font-size, 12px) !important;
    font-weight: 400 !important;
    justify-content: center !important;
    line-height: 1 !important;
}

body.ff-app .ff-payment-capture .checkbox.clip-check input[type="checkbox"]:checked + label::after,
body.ff-app .ff-payment-capture .checkbox.clip-check input[type="checkbox"]:checked + label:after {
    left: 0 !important;
    text-align: center !important;
    width: 20px !important;
}

@media (max-width: 1080px) {
    body.ff-app .ff-payment-capture .ff-payment-main-row,
    body.ff-app .ff-payment-capture .ff-payment-reference-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.ff-app .ff-payment-capture .ff-payment-id-group,
    body.ff-app .ff-payment-capture .ff-payment-client-field,
    body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8,
    body.ff-app .ff-payment-capture .ff-payment-reference-row > .ff-payment-balance-group {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 640px) {
    body.ff-app .ff-payment-capture .ff-payment-main-row,
    body.ff-app .ff-payment-capture .ff-payment-reference-row,
    body.ff-app .ff-payment-capture .ff-payment-balance-group > .row {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-main-row,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row {
    display: grid !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-main-row > [class*="col-md-"],
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row > [class*="col-md-"] {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app[data-grid-density="compact"] .ff-payment-capture .ff-payment-reference-row > .ff-payment-balance-group,
body.ff-app.ff-grid-density-compact .ff-payment-capture .ff-payment-reference-row > .ff-payment-balance-group,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row > .ff-payment-balance-group {
    flex: none !important;
    max-width: none !important;
    width: auto !important;
}

body.ff-app[data-grid-density="compact"] .ff-payment-capture .ff-payment-balance-group .ff-payment-balance-field,
body.ff-app.ff-grid-density-compact .ff-payment-capture .ff-payment-balance-group .ff-payment-balance-field,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group .ff-payment-balance-field {
    flex: none !important;
    max-width: none !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row > .ff-payment-id-field {
    max-width: none !important;
    min-width: 0 !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row .input-icon {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .form-group > label:has(.symbol.required) {
    align-items: center !important;
    display: inline-flex !important;
    gap: 2px !important;
    line-height: 14px !important;
    min-height: 14px !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .form-group > label .symbol.required {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    height: 14px !important;
    line-height: 14px !important;
    margin: 0 !important;
    min-height: 14px !important;
    vertical-align: middle !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .form-group > label .symbol.required::before {
    align-items: center !important;
    display: inline-flex !important;
    font-size: 14px !important;
    height: 14px !important;
    line-height: 14px !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset .form-group > label:has(.symbol.required),
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset .form-group > label .symbol.required,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset .form-group > label .symbol.required::before {
    height: 13px !important;
    line-height: 13px !important;
    min-height: 13px !important;
}

body.ff-app .ff-payment-capture .ff-payment-customs-row > .ff-payment-show-dormant-cell {
    align-items: flex-start !important;
    display: flex !important;
    margin-top: 0 !important;
    padding-top: 17px !important;
}

body.ff-app .ff-payment-capture .ff-payment-show-dormant-cell .valuesonly,
body.ff-app .ff-payment-capture .ff-payment-show-dormant-cell .checkbox.clip-check {
    align-items: center !important;
    display: inline-flex !important;
    height: var(--ff-control-h) !important;
    margin: 0 !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-payment-capture .ff-payment-show-dormant-cell .checkbox.clip-check label {
    align-items: center !important;
    display: inline-flex !important;
    line-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-payment-capture .ff-payment-show-dormant-cell .checkbox.clip-check label::before,
body.ff-app .ff-payment-capture .ff-payment-show-dormant-cell .checkbox.clip-check label::after {
    top: calc((var(--ff-control-h) - 20px) / 2) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-customs-row > .ff-payment-show-dormant-cell {
    padding-top: 15px !important;
}

/* Payment capture dense layout: left-aligned fields, compact gaps, wrap only when needed. */
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-main-row,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-customs-row {
    align-items: flex-start !important;
    column-gap: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    margin-bottom: 1px !important;
    row-gap: 2px !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-main-row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-main-row::after,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-reference-row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-reference-row::after,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-customs-row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-customs-row::after,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-reference-row > .col-md-8 > .row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-reference-row > .col-md-8 > .row::after,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-inline-checkboxes > .row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-inline-checkboxes > .row::after,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group > .row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group > .row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-main-row > [class*="col-md-"],
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row > [class*="col-md-"],
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-customs-row > [class*="col-md-"] {
    float: none !important;
    grid-column: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .form-group {
    margin-bottom: 1px !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .form-group > label {
    line-height: 13px !important;
    margin-bottom: 1px !important;
    min-height: 13px !important;
}

body.ff-app .ff-payment-capture .ff-payment-id-group {
    flex: 0 1 600px !important;
    min-width: 450px !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row {
    column-gap: 8px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    row-gap: 2px !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row > .ff-payment-id-field {
    flex: 1 1 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-client-field {
    flex: 0 1 440px !important;
    min-width: 300px !important;
}

body.ff-app .ff-payment-capture .ff-payment-amount-field,
body.ff-app .ff-payment-capture .ff-payment-balance-field,
body.ff-app .ff-payment-capture .ff-payment-customs-row > .col-md-2 {
    flex: 0 0 300px !important;
    max-width: 300px !important;
    min-width: 240px !important;
    width: 300px !important;
}

body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8 {
    flex: 0 1 auto !important;
    max-width: none !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8 > .row {
    align-items: flex-start !important;
    column-gap: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    row-gap: 2px !important;
}

body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8 > .row > .col-md-4:not(.ff-payment-inline-checkboxes) {
    flex: 0 0 320px !important;
    float: none !important;
    max-width: 320px !important;
    min-width: 240px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 320px !important;
}

body.ff-app .ff-payment-capture .ff-payment-inline-checkboxes {
    flex: 0 0 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-inline-checkboxes > .row {
    align-items: flex-start !important;
    column-gap: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    row-gap: 2px !important;
}

body.ff-app .ff-payment-capture .ff-payment-checkbox-cell,
body.ff-app .ff-payment-capture .ff-payment-show-dormant-cell {
    flex: 0 0 auto !important;
    float: none !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 14px !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-balance-group {
    flex: 0 0 610px !important;
    max-width: 610px !important;
    min-width: 490px !important;
    width: 610px !important;
}

body.ff-app .ff-payment-capture .ff-payment-balance-group > .row {
    align-items: flex-start !important;
    column-gap: 10px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    row-gap: 2px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row > .ff-payment-balance-group,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row > .ff-payment-balance-group {
    flex: 0 0 610px !important;
    max-width: 610px !important;
    min-width: 490px !important;
    width: 610px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group .ff-payment-balance-field,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group .ff-payment-balance-field {
    flex: 0 0 300px !important;
    max-width: 300px !important;
    min-width: 240px !important;
    width: 300px !important;
}

body.ff-app .ff-payment-capture .ff-payment-customs-row > .ff-payment-show-dormant-cell {
    align-self: flex-start !important;
    padding-top: 14px !important;
}

body.ff-app .ff-payment-capture .ff-payment-show-dormant-cell .valuesonly {
    margin-left: 0 !important;
}

@media (max-width: 1320px) {
    body.ff-app .ff-payment-capture .ff-payment-id-group {
        flex-basis: 520px !important;
        min-width: 390px !important;
    }

    body.ff-app .ff-payment-capture .ff-payment-client-field {
        flex-basis: 380px !important;
    }

    body.ff-app .ff-payment-capture .ff-payment-amount-field,
    body.ff-app .ff-payment-capture .ff-payment-balance-field,
    body.ff-app .ff-payment-capture .ff-payment-customs-row > .col-md-2 {
        flex-basis: 280px !important;
        max-width: 280px !important;
        width: 280px !important;
    }

    body.ff-app .ff-payment-capture .ff-payment-balance-group {
        flex-basis: 570px !important;
        max-width: 570px !important;
        width: 570px !important;
    }

    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row > .ff-payment-balance-group,
    body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row > .ff-payment-balance-group {
        flex-basis: 570px !important;
        max-width: 570px !important;
        width: 570px !important;
    }

    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group .ff-payment-balance-field,
    body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group .ff-payment-balance-field {
        flex-basis: 280px !important;
        max-width: 280px !important;
        width: 280px !important;
    }
}

@media (max-width: 980px) {
    body.ff-app .ff-payment-capture .ff-payment-id-group,
    body.ff-app .ff-payment-capture .ff-payment-client-field {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row {
        flex-wrap: wrap !important;
    }

    body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row > .ff-payment-id-field {
        flex: 1 1 150px !important;
        min-width: 150px !important;
    }
}

/* Payment capture header: screenshot-style compact alignment. */
body.ff-app .ff-payment-capture .ff-payment-details-fieldset {
    --ff-payment-gap-x: 14px;
    --ff-payment-gap-y: 0px;
    --ff-payment-money-w: 134px;
    --ff-payment-balance-w: var(--ff-payment-money-w);
    --ff-payment-balance-group-w: calc((var(--ff-payment-money-w) * 2) + var(--ff-payment-gap-x));
    --ff-payment-id-w: 320px;
    --ff-payment-id-gap-x: 8px;
    --ff-payment-reference-w: 191px;
    --ff-payment-customs-w: 127px;
    --ff-payment-right-reserve: 60px;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-main-row,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-customs-row {
    align-items: flex-start !important;
    box-sizing: border-box !important;
    column-gap: var(--ff-payment-gap-x) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    margin: 0 0 var(--ff-payment-gap-y) !important;
    row-gap: var(--ff-payment-gap-y) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-main-row,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-customs-row {
    margin-bottom: 0 !important;
    row-gap: 0 !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-main-row,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row {
    padding-right: var(--ff-payment-right-reserve) !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-main-row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-main-row::after,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-reference-row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-reference-row::after,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-customs-row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-customs-row::after,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row::after,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-reference-row > .col-md-8 > .row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-reference-row > .col-md-8 > .row::after,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-inline-checkboxes > .row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-inline-checkboxes > .row::after,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group > .row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group > .row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-main-row > [class*="col-md-"],
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row > [class*="col-md-"],
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-customs-row > [class*="col-md-"],
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row > [class*="col-md-"],
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-reference-row > .col-md-8 > .row > [class*="col-md-"],
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group > .row > [class*="col-md-"],
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-inline-checkboxes > .row > [class*="col-md-"] {
    float: none !important;
    grid-column: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .form-group {
    margin-bottom: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset .form-group {
    margin-bottom: 0 !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .form-group > label {
    align-items: center !important;
    display: inline-flex !important;
    gap: 2px !important;
    line-height: 14px !important;
    margin: 0 0 1px !important;
    min-height: 14px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .form-group > label .symbol.required,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .form-group > label .symbol.required::before {
    align-items: center !important;
    display: inline-flex !important;
    height: 16px !important;
    line-height: 16px !important;
    margin: 0 !important;
    min-height: 16px !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .form-group > label .symbol.required::before {
    font-size: 16px !important;
}

body.ff-app .ff-payment-capture .ff-payment-id-group {
    flex: 0 1 var(--ff-payment-id-w) !important;
    max-width: var(--ff-payment-id-w) !important;
    min-width: 300px !important;
    width: var(--ff-payment-id-w) !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row {
    column-gap: var(--ff-payment-id-gap-x) !important;
    display: grid !important;
    grid-template-columns: 88px 98px 114px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    row-gap: var(--ff-payment-gap-y) !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row > .ff-payment-id-field:nth-child(3) {
    margin-left: 4px !important;
}

body.ff-app .ff-payment-capture .ff-payment-client-field {
    flex: 1 1 120px !important;
    min-width: 80px !important;
}

body.ff-app .ff-payment-capture .ff-payment-main-row > .ff-payment-amount-field {
    flex: 0 0 var(--ff-payment-money-w) !important;
    max-width: var(--ff-payment-money-w) !important;
    min-width: var(--ff-payment-money-w) !important;
    width: var(--ff-payment-money-w) !important;
}

body.ff-app .ff-payment-capture .ff-payment-reference-row {
    flex-wrap: nowrap !important;
}

body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8 {
    flex: 1 1 auto !important;
    min-width: 620px !important;
}

body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8 > .row {
    align-items: flex-start !important;
    column-gap: var(--ff-payment-gap-x) !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    row-gap: var(--ff-payment-gap-y) !important;
}

body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8 > .row > .col-md-4:first-child {
    flex: 0 0 var(--ff-payment-reference-w) !important;
    max-width: var(--ff-payment-reference-w) !important;
    width: var(--ff-payment-reference-w) !important;
}

body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8 > .row > .col-md-4:nth-child(2) {
    flex: 1 1 360px !important;
}

body.ff-app .ff-payment-capture .ff-payment-balance-group {
    flex: 0 0 var(--ff-payment-balance-group-w) !important;
    margin-left: auto !important;
    max-width: var(--ff-payment-balance-group-w) !important;
    min-width: var(--ff-payment-balance-group-w) !important;
    width: var(--ff-payment-balance-group-w) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row > .ff-payment-balance-group,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row > .ff-payment-balance-group {
    flex: 0 0 var(--ff-payment-balance-group-w) !important;
    margin-left: auto !important;
    max-width: var(--ff-payment-balance-group-w) !important;
    min-width: var(--ff-payment-balance-group-w) !important;
    width: var(--ff-payment-balance-group-w) !important;
}

body.ff-app .ff-payment-capture .ff-payment-balance-group > .row {
    align-items: flex-start !important;
    column-gap: var(--ff-payment-gap-x) !important;
    display: grid !important;
    grid-template-columns: repeat(2, var(--ff-payment-balance-w)) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    row-gap: var(--ff-payment-gap-y) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group .ff-payment-balance-field,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group .ff-payment-balance-field {
    flex: 0 0 var(--ff-payment-balance-w) !important;
    max-width: var(--ff-payment-balance-w) !important;
    min-width: var(--ff-payment-balance-w) !important;
    width: var(--ff-payment-balance-w) !important;
}

body.ff-app .ff-payment-capture .ff-payment-customs-row > .col-md-2 {
    flex: 0 0 var(--ff-payment-customs-w) !important;
    max-width: var(--ff-payment-customs-w) !important;
    min-width: var(--ff-payment-customs-w) !important;
    width: var(--ff-payment-customs-w) !important;
}

body.ff-app .ff-payment-capture .ff-payment-customs-row > .ff-payment-inline-checkboxes {
    align-self: flex-start !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    padding-top: calc(17px + ((var(--ff-control-h) - 20px) / 2)) !important;
    width: auto !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-customs-row > .ff-payment-inline-checkboxes,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-customs-row > .ff-payment-inline-checkboxes {
    padding-top: calc(17px + ((var(--ff-control-h) - 20px) / 2)) !important;
}

body.ff-app .ff-payment-capture .ff-payment-inline-checkboxes > .row {
    align-items: center !important;
    column-gap: 22px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: 20px !important;
    row-gap: 4px !important;
}

body.ff-app .ff-payment-capture .ff-payment-checkbox-cell {
    align-items: center !important;
    display: flex !important;
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    min-height: 20px !important;
    padding-top: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-checkbox-cell,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-checkbox-cell {
    padding-top: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-customs-row .ff-payment-checkbox-cell,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-customs-row [class*="col-"].ff-payment-checkbox-cell:has(> .checkbox.clip-check),
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-customs-row .ff-payment-checkbox-cell {
    padding-top: 0 !important;
}

body.ff-app .ff-payment-capture .ff-payment-customs-row > .ff-payment-show-dormant-cell {
    align-items: center !important;
    align-self: flex-start !important;
    display: flex !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    max-width: none !important;
    min-height: 20px !important;
    padding-top: calc(17px + ((var(--ff-control-h) - 20px) / 2)) !important;
    width: auto !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-customs-row > .ff-payment-show-dormant-cell,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-customs-row > .ff-payment-show-dormant-cell {
    padding-top: calc(17px + ((var(--ff-control-h) - 20px) / 2)) !important;
}

body.ff-app .ff-payment-capture .ff-payment-show-dormant-cell .valuesonly {
    margin-left: 0 !important;
}

body.ff-app .ff-payment-capture .ff-payment-customs-row > .ff-payment-show-dormant-cell .valuesonly,
body.ff-app .ff-payment-capture .ff-payment-customs-row > .ff-payment-show-dormant-cell .checkbox.clip-check,
body.ff-app .ff-payment-capture .ff-payment-customs-row > .ff-payment-show-dormant-cell .checkbox.clip-check label {
    height: 20px !important;
    line-height: 20px !important;
    min-height: 20px !important;
}

body.ff-app .ff-payment-capture .ff-payment-customs-row > .ff-payment-show-dormant-cell .checkbox.clip-check label::before,
body.ff-app .ff-payment-capture .ff-payment-customs-row > .ff-payment-show-dormant-cell .checkbox.clip-check label::after {
    top: 0 !important;
}

body.ff-app .ff-payment-capture .checkbox.clip-check {
    display: inline-flex !important;
    margin: 0 !important;
    min-height: 20px !important;
}

body.ff-app .ff-payment-capture .checkbox.clip-check label {
    align-items: center !important;
    display: inline-flex !important;
    line-height: 20px !important;
    margin: 0 !important;
    min-height: 20px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-payment-capture .checkbox.clip-check label::before,
body.ff-app .ff-payment-capture .checkbox.clip-check label::after {
    left: 0 !important;
}

body.ff-app .ff-payment-capture .checkbox.clip-check input[type="checkbox"]:checked + label::after,
body.ff-app .ff-payment-capture .checkbox.clip-check input[type="checkbox"]:checked + label:after {
    left: 0 !important;
    text-align: center !important;
    width: 20px !important;
}

body.ff-app .ff-payment-capture .bootstrap-touchspin {
    align-items: stretch !important;
    display: flex !important;
    width: 100% !important;
}

body.ff-app .ff-payment-capture .bootstrap-touchspin .input-group-addon.bootstrap-touchspin-prefix {
    align-items: center !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex: 0 0 28px !important;
    font-size: var(--ff-control-font-size, 12px) !important;
    font-weight: 400 !important;
    justify-content: center !important;
    line-height: 1 !important;
    min-width: 28px !important;
    padding: 0 !important;
    width: 28px !important;
}

body.ff-app .ff-payment-capture .bootstrap-touchspin .form-control,
body.ff-app .ff-payment-capture .ff-payment-client-field .ui-select-container,
body.ff-app .ff-payment-capture .ff-payment-client-field .ui-select-bootstrap,
body.ff-app .ff-payment-capture .ff-payment-client-field .ui-select-bootstrap > .ui-select-match,
body.ff-app .ff-payment-capture .ff-payment-client-field .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-payment-capture .ff-payment-client-field .ui-select-bootstrap > .ui-select-match > .ui-select-toggle {
    min-width: 0 !important;
    width: 100% !important;
}

@media (max-width: 1700px) {
    body.ff-app .ff-payment-capture .ff-payment-details-fieldset {
        --ff-payment-money-w: 134px;
        --ff-payment-id-w: 320px;
        --ff-payment-reference-w: 191px;
        --ff-payment-customs-w: 127px;
        --ff-payment-right-reserve: 32px;
    }

    body.ff-app .ff-payment-capture .ff-payment-client-field {
        min-width: 80px !important;
    }
}

@media (max-width: 1320px) {
    body.ff-app .ff-payment-capture .ff-payment-details-fieldset {
        --ff-payment-money-w: 134px;
        --ff-payment-id-w: 320px;
        --ff-payment-reference-w: 191px;
        --ff-payment-customs-w: 127px;
        --ff-payment-right-reserve: 0px;
    }

    body.ff-app .ff-payment-capture .ff-payment-reference-row {
        flex-wrap: nowrap !important;
    }

    body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8 {
        flex: 1 1 auto !important;
        min-width: 420px !important;
    }

    body.ff-app .ff-payment-capture .ff-payment-balance-group {
        margin-left: auto !important;
    }
}

@media (max-width: 760px) {
    body.ff-app .ff-payment-capture .ff-payment-id-group,
    body.ff-app .ff-payment-capture .ff-payment-client-field,
    body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8 {
        flex: 1 1 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row,
    body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8 > .row,
    body.ff-app .ff-payment-capture .ff-payment-balance-group > .row,
    body.ff-app .ff-payment-capture .ff-payment-inline-checkboxes > .row {
        flex-wrap: wrap !important;
    }

    body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row {
        grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)) !important;
    }

    body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8 > .row > .col-md-4:first-child,
    body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8 > .row > .col-md-4:nth-child(2) {
        flex: 1 1 280px !important;
        max-width: none !important;
        width: auto !important;
    }
}

@media (max-width: 640px) {
    body.ff-app .ff-payment-capture .ff-payment-main-row > .ff-payment-amount-field,
    body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group,
    body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group .ff-payment-balance-field,
    body.ff-app .ff-payment-capture .ff-payment-customs-row > .col-md-2 {
        flex: 1 1 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    body.ff-app .ff-payment-capture .ff-payment-balance-group > .row {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Parcel tracking capture */
body.ff-app .ff-waybill #page-title.ff-parcel-tracking-header .ff-page-header-row {
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

body.ff-app .ff-waybill #page-title.ff-parcel-tracking-header .ff-page-title-wrap {
    flex: 0 0 auto !important;
}

body.ff-app .ff-waybill #page-title.ff-parcel-tracking-header .ff-toolbar {
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-form-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-fieldset {
    padding-top: 10px !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-fieldset .form-group {
    margin-bottom: 4px !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-top-row,
body.ff-app .ff-waybill .ff-parcel-tracking-id-date-row,
body.ff-app .ff-waybill .ff-parcel-tracking-manifest-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-top-row::before,
body.ff-app .ff-waybill .ff-parcel-tracking-top-row::after,
body.ff-app .ff-waybill .ff-parcel-tracking-id-date-row::before,
body.ff-app .ff-waybill .ff-parcel-tracking-id-date-row::after,
body.ff-app .ff-waybill .ff-parcel-tracking-manifest-row::before,
body.ff-app .ff-waybill .ff-parcel-tracking-manifest-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-top-row > [class*="col-"],
body.ff-app .ff-waybill .ff-parcel-tracking-id-date-row > [class*="col-"],
body.ff-app .ff-waybill .ff-parcel-tracking-manifest-row > [class*="col-"] {
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-id-date-group {
    flex: 0 1 320px !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-track-field {
    flex: 0 0 118px !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-date-field {
    flex: 1 1 180px !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-activity-field,
body.ff-app .ff-waybill .ff-parcel-tracking-agent-field {
    flex: 1 1 285px !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-manifest-group {
    flex: 1 1 390px !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-manifest-field {
    flex: 0 1 150px !important;
    max-width: 170px !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-manifest-action {
    flex: 0 0 34px !important;
    margin-top: 0 !important;
    padding-top: 16px !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-manifest-action .btn-group,
body.ff-app .ff-waybill .ff-parcel-tracking-manifest-action .dropdown-toggle {
    width: 34px !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-reference-field {
    flex: 1 1 170px !important;
}

body.ff-app .ff-waybill.ff-view-compact .ff-parcel-tracking-fieldset {
    padding-top: 7px !important;
}

body.ff-app .ff-waybill.ff-view-compact .ff-parcel-tracking-fieldset .form-group {
    margin-bottom: 2px !important;
}

body.ff-app .ff-waybill.ff-view-compact .ff-parcel-tracking-manifest-action {
    padding-top: 13px !important;
}

/* Sender/receiver filters: compact fields without affecting the receiver grid. */
body.ff-app .ff-receivers .ff-receivers-filter-primary-row,
body.ff-app .ff-receivers .ff-receivers-filter-secondary-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px 8px !important;
    margin: 0 0 3px !important;
}

body.ff-app .ff-receivers .ff-receivers-filter-primary-row::before,
body.ff-app .ff-receivers .ff-receivers-filter-primary-row::after,
body.ff-app .ff-receivers .ff-receivers-filter-secondary-row::before,
body.ff-app .ff-receivers .ff-receivers-filter-secondary-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-receivers .ff-receivers-filter-primary-row > [class*="col-"],
body.ff-app .ff-receivers .ff-receivers-filter-secondary-row > [class*="col-"] {
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-receivers .ff-receivers-filter-primary-row .form-group,
body.ff-app .ff-receivers .ff-receivers-filter-secondary-row .form-group {
    margin-bottom: 0 !important;
}

body.ff-app .ff-receivers .ff-receivers-name-field {
    flex: 0 0 196px !important;
    max-width: 196px !important;
    min-width: 196px !important;
}

body.ff-app .ff-receivers .ff-receivers-acc-field {
    flex: 0 0 110px !important;
    max-width: 110px !important;
}

body.ff-app .ff-receivers .ff-receivers-client-field {
    flex: 1 1 260px !important;
    max-width: 360px !important;
    min-width: 220px !important;
}

body.ff-app .ff-receivers .ff-receivers-route-field {
    flex: 1 1 210px !important;
    max-width: 300px !important;
    min-width: 180px !important;
}

body.ff-app .ff-receivers .ff-receivers-group-field {
    flex: 1 1 190px !important;
    max-width: 260px !important;
    min-width: 165px !important;
}

body.ff-app .ff-receivers .ff-receivers-filter-secondary-row .ff-receivers-checkbox-field {
    align-items: center !important;
    display: flex !important;
    flex: 0 0 auto !important;
    max-width: none !important;
}

body.ff-app .ff-receivers .ff-receivers-filter-secondary-row--has-dates .ff-receivers-checkbox-field,
body.ff-app .ff-receivers .ff-receivers-filter-secondary-row--has-dates .ff-receivers-search-field {
    padding-top: 15px !important;
}

body.ff-app .ff-receivers .ff-receivers-filter-secondary-row .ff-receivers-checkbox-field .checkbox,
body.ff-app .ff-receivers .ff-receivers-filter-secondary-row .ff-receivers-checkbox-field .checkbox-inline {
    align-items: center !important;
    display: inline-flex !important;
    height: var(--ff-control-h) !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-receivers .ff-receivers-filter-secondary-row .ff-receivers-checkbox-field .clip-check label {
    align-items: center !important;
    display: inline-flex !important;
    height: var(--ff-control-h) !important;
    line-height: var(--ff-control-h) !important;
    margin-right: 0 !important;
    min-height: var(--ff-control-h) !important;
    white-space: nowrap !important;
}

body.ff-app .ff-receivers .ff-receivers-filter-secondary-row .ff-receivers-checkbox-field .clip-check label:before,
body.ff-app .ff-receivers .ff-receivers-filter-secondary-row .ff-receivers-checkbox-field .clip-check label:after {
    top: calc((var(--ff-control-h) - 20px) / 2) !important;
}

body.ff-app .ff-receivers .ff-receivers-search-field .btn {
    height: var(--ff-control-h) !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    text-align: center !important;
}

body.ff-app .ff-receivers .ff-receivers-search-field {
    align-items: center !important;
    display: flex !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    max-width: none !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-receivers .ff-receivers-filter-secondary-row--has-dates .ff-receivers-search-field,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-receivers .ff-receivers-filter-secondary-row--has-dates .ff-receivers-checkbox-field,
body.ff-app .ff-receivers.ff-view-compact .ff-receivers-filter-secondary-row--has-dates .ff-receivers-checkbox-field,
body.ff-app .ff-receivers.ff-view-compact .ff-receivers-filter-secondary-row--has-dates .ff-receivers-search-field {
    padding-top: 12px !important;
}

/* Client/Agent master: keep top-row captions, required marks, and fields level. */
body.ff-app .ff-client .ff-client-master-top-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 6px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-client .ff-client-master-top-row::before,
body.ff-app .ff-client .ff-client-master-top-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-client .ff-client-master-top-row > .ff-client-master-mode-fields {
    display: contents !important;
}

body.ff-app .ff-client .ff-client-master-top-row > [class*="col-"],
body.ff-app .ff-client .ff-client-master-top-row > .ff-client-master-mode-fields > [class*="col-"] {
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-client .ff-client-master-action-field {
    flex: 0 1 160px !important;
}

body.ff-app .ff-client .ff-client-master-list-field {
    flex: 1 1 205px !important;
}

body.ff-app .ff-client .ff-client-master-name-field {
    flex: 1 1 190px !important;
}

body.ff-app .ff-client .ff-client-master-acc-field {
    flex: 0 1 88px !important;
}

body.ff-app .ff-client .ff-client-master-top-row .form-group {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    margin-bottom: 3px !important;
    min-width: 0 !important;
}

body.ff-app .ff-client .ff-client-master-top-row > .ff-client-master-mode-fields .form-group {
    margin-top: -1px !important;
}

body.ff-app .ff-client .ff-client-master-top-row .form-group > label {
    align-items: center !important;
    display: flex !important;
    font-size: var(--ff-control-font-size, 12px) !important;
    line-height: 15px !important;
    margin-bottom: 2px !important;
    min-height: 15px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

body.ff-app .ff-client .ff-client-master-top-row .form-group > label.width100 {
    justify-content: space-between !important;
}

body.ff-app .ff-client .ff-client-master-top-row .form-group > label .pull-right {
    float: none !important;
    height: 15px !important;
    line-height: 15px !important;
    margin-left: auto !important;
    max-width: 86px !important;
    min-height: 15px !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app .ff-client .ff-client-master-top-row .form-group > label .symbol.required {
    align-items: center !important;
    display: inline-flex !important;
    height: 14px !important;
    line-height: 14px !important;
    margin-left: 3px !important;
    vertical-align: baseline !important;
}

body.ff-app .ff-client .ff-client-master-top-row .form-group > label .symbol.required::before {
    display: inline-block !important;
    font-size: inherit !important;
    height: 14px !important;
    line-height: 14px !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
    vertical-align: baseline !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-client .form-group .dropdown-toggle.btn:not(.ff-action),
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-client .ff-ms .multiselect-parent.btn-group.dropdown-multiselect button.dropdown-toggle.btn {
    height: var(--ff-control-h) !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-client .tabbable {
    margin-top: 4px !important;
}

body.ff-app .ff-client .tabbable .nav-tabs {
    margin-bottom: 0 !important;
}

body.ff-app .ff-client .tabbable .nav-tabs > li > a {
    line-height: 16px !important;
    min-height: 26px !important;
    padding-bottom: 4px !important;
    padding-top: 4px !important;
}

body.ff-app .ff-client .tabbable .tab-content {
    padding-top: 6px !important;
}

body.ff-app .ff-client .tabbable .tab-content .form-group {
    margin-bottom: 4px !important;
}

body.ff-app .ff-client .tabbable .tab-content .form-group > label {
    line-height: 14px !important;
    margin-bottom: 1px !important;
    min-height: 14px !important;
}

body.ff-app .ff-client .tabbable .tab-content fieldset {
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
    padding-top: 5px !important;
}

body.ff-app .ff-client .tabbable .tab-content legend {
    line-height: 16px !important;
    margin-bottom: 4px !important;
}

body.ff-app .ff-client .tabbable .tab-content .checkbox {
    margin-bottom: 2px !important;
    margin-top: 2px !important;
}

body.ff-app .ff-client .tabbable .tab-content .clip-check label {
    line-height: 16px !important;
    min-height: 16px !important;
}

body.ff-app .ff-client .ff-client-waybill-checkbox-row {
    align-items: flex-start !important;
    clear: both !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 0 !important;
    margin-top: 2px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-client .ff-client-waybill-checkbox-cell {
    flex: 0 1 25% !important;
    min-width: 230px !important;
    padding-left: 0 !important;
    padding-right: 8px !important;
}

body.ff-app .ff-client .ff-client-waybill-checkbox-cell .checkbox.clip-check {
    display: block !important;
    margin-bottom: 2px !important;
    margin-top: 2px !important;
    white-space: normal !important;
}

body.ff-app .ff-client .ff-client-waybill-checkbox-cell .clip-check label {
    display: inline-block !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    padding-left: 28px !important;
    white-space: normal !important;
}

@media (max-width: 1199px) {
    body.ff-app .ff-client .ff-client-waybill-checkbox-cell {
        flex-basis: 50% !important;
    }
}

@media (max-width: 767px) {
    body.ff-app .ff-client .ff-client-waybill-checkbox-cell {
        flex-basis: 100% !important;
        min-width: 0 !important;
        padding-right: 0 !important;
    }
}

body.ff-app .ff-client .ff-client-billing-side {
    padding-left: 6px !important;
}

body.ff-app .ff-client .ff-client-billing-layout {
    align-items: flex-start !important;
    display: flex !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-client .ff-client-billing-grid {
    column-gap: 16px !important;
    display: grid !important;
    flex: 1 1 auto !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    margin: 0 !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 10px !important;
    row-gap: 4px !important;
    width: auto !important;
}

body.ff-app .ff-client .ff-client-billing-grid > [class*="col-md-"] {
    float: none !important;
    margin: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-client .ff-client-billing-grid > .ff-client-wbs-per-inv-field {
    grid-column: 1 !important;
}

body.ff-app .ff-client .ff-client-billing-grid .form-group {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    justify-content: flex-start !important;
}

body.ff-app .ff-client .tabbable .tab-content .bootstrap-touchspin {
    align-items: stretch !important;
    display: flex !important;
    overflow: hidden !important;
    width: 100% !important;
}

body.ff-app .ff-client .tabbable .tab-content .bootstrap-touchspin .input-group-addon.bootstrap-touchspin-prefix {
    align-items: center !important;
    background: var(--ff-surface) !important;
    border: 1px solid var(--ff-border) !important;
    border-radius: var(--ff-radius-sm) 0 0 var(--ff-radius-sm) !important;
    border-right: 0 !important;
    box-sizing: border-box !important;
    color: var(--ff-text) !important;
    display: inline-flex !important;
    flex: 0 0 28px !important;
    font-size: var(--ff-control-font-size, 12px) !important;
    font-weight: 400 !important;
    justify-content: center !important;
    line-height: 1 !important;
    min-width: 28px !important;
    padding: 0 !important;
    width: 28px !important;
}

body.ff-app .ff-client .tabbable .tab-content .bootstrap-touchspin .form-control {
    border-left: 0 !important;
    border-radius: 0 var(--ff-radius-sm) var(--ff-radius-sm) 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 1% !important;
}

body.ff-app .ff-client .ff-client-billing-rate-client {
    margin: 0 0 4px !important;
}

body.ff-app .ff-client .ff-client-billing-rate-client .form-group {
    margin-bottom: 3px !important;
}

body.ff-app .ff-client .ff-client-rate-history-btn {
    align-items: center !important;
    display: inline-flex !important;
    line-height: 16px !important;
    margin-top: 0 !important;
    min-height: 26px !important;
    padding: 4px 8px !important;
}

body.ff-app .ff-client .ff-client-billing-options-row {
    margin-top: 4px !important;
}

@media (max-width: 1599px) {
    body.ff-app .ff-client .ff-client-billing-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1199px) {
    body.ff-app .ff-client .ff-client-billing-layout {
        display: block !important;
    }

    body.ff-app .ff-client .ff-client-billing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    body.ff-app .ff-client .ff-client-billing-side {
        margin-top: 8px !important;
        padding-left: 0 !important;
    }
}

@media (max-width: 767px) {
    body.ff-app .ff-client .ff-client-billing-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Driver master: keep the Driver lookup and required markers aligned in the top row. */
body.ff-app .ff-driver .ff-driver-master-top-row .form-group {
    margin-bottom: 3px !important;
}

body.ff-app .ff-driver .ff-driver-master-top-row .form-group > label {
    align-items: center !important;
    display: flex !important;
    line-height: 15px !important;
    margin-bottom: 2px !important;
    min-height: 15px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

body.ff-app .ff-driver .ff-driver-master-top-row .form-group > label .symbol.required {
    align-items: center !important;
    display: inline-flex !important;
    height: 14px !important;
    line-height: 14px !important;
    margin-left: 3px !important;
    vertical-align: baseline !important;
}

body.ff-app .ff-driver .ff-driver-master-top-row .form-group > label .symbol.required::before {
    display: inline-block !important;
    font-size: 16px !important;
    height: 14px !important;
    line-height: 14px !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
    vertical-align: baseline !important;
}

body.ff-app .ff-driver .ff-driver-master-top-row .form-group.has-error > label .symbol.required::before,
body.ff-app .ff-driver .ff-driver-master-top-row .form-group.has-success > label .symbol.required::before {
    font-size: 12px !important;
}

/* User master: keep the first identity row aligned and compact. */
body.ff-app .ff-users .ff-users-identity-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 6px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-users .ff-users-identity-row::before,
body.ff-app .ff-users .ff-users-identity-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-users .ff-users-identity-row > [class*="col-"] {
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-users .ff-users-action-field {
    flex: 0 1 160px !important;
}

body.ff-app .ff-users .ff-users-select-field {
    flex: 1 1 180px !important;
}

body.ff-app .ff-users .ff-users-username-field,
body.ff-app .ff-users .ff-users-password-field {
    flex: 1 1 160px !important;
}

body.ff-app .ff-users .ff-users-identity-row .form-group {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    margin-bottom: 3px !important;
    min-width: 0 !important;
}

body.ff-app .ff-users .ff-users-identity-row .ff-users-select-field .form-group {
    margin-top: -1px !important;
}

body.ff-app .ff-users .ff-users-identity-row label {
    align-items: center !important;
    display: flex !important;
    line-height: 15px !important;
    margin-bottom: 2px !important;
    min-height: 15px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

body.ff-app .ff-users .ff-users-identity-row label .pull-right {
    float: none !important;
    margin-left: auto !important;
    max-width: 72px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app .ff-users .ff-users-identity-row label [json-dbl].pull-right {
    height: 15px !important;
    line-height: 15px !important;
    min-height: 15px !important;
    padding: 0 4px !important;
}

body.ff-app .ff-users .ff-users-identity-row .ff-users-select-field .ui-select-container,
body.ff-app .ff-users .ff-users-identity-row .ff-users-select-field .ui-select-match,
body.ff-app .ff-users .ff-users-identity-row .ff-users-select-field .ui-select-toggle,
body.ff-app .ff-waybill.ff-users .ff-users-identity-row .ff-users-select-field .ff-ui.ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn {
    height: 30px !important;
    margin-top: 0 !important;
    min-height: 30px !important;
}

body.ff-app .ff-users .ff-users-identity-row .ff-users-select-field .ui-select-match,
body.ff-app .ff-users .ff-users-identity-row .ff-users-select-field .ui-select-toggle {
    display: block !important;
}

body.ff-app .ff-users .ff-users-identity-row .ff-users-select-field .ui-select-toggle,
body.ff-app .ff-waybill.ff-users .ff-users-identity-row .ff-users-select-field .ff-ui.ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn {
    line-height: 16px !important;
    padding-bottom: 5px !important;
    padding-top: 5px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-users .ff-users-identity-row {
    gap: 2px 5px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-users .ff-users-identity-row .form-group {
    margin-bottom: 2px !important;
}

body.ff-app .ff-users .ff-users-identity-row .error {
    line-height: 12px !important;
    margin-top: 1px !important;
    min-height: 12px !important;
}

body.ff-app .ff-users .ff-users-main-col > .row:not(.ff-users-identity-row) .form-group > label:has(.symbol.required):not(.width100) {
    align-items: center !important;
    display: inline-flex !important;
    line-height: 15px !important;
    margin-bottom: 2px !important;
    min-height: 15px !important;
}

body.ff-app .ff-users .ff-users-identity-row label .symbol.required,
body.ff-app .ff-users .ff-users-main-col .form-group > label .symbol.required {
    align-items: center !important;
    display: inline-flex !important;
    height: 14px !important;
    line-height: 14px !important;
    margin-left: 3px !important;
    vertical-align: baseline !important;
}

body.ff-app .ff-users .ff-users-identity-row label .symbol.required::before,
body.ff-app .ff-users .ff-users-main-col .form-group > label .symbol.required::before {
    display: inline-block !important;
    font-size: 16px !important;
    height: 14px !important;
    line-height: 14px !important;
    position: static !important;
    top: auto !important;
    transform: translateY(1px) !important;
    vertical-align: baseline !important;
}

body.ff-app .ff-users .has-error .symbol.required::before,
body.ff-app .ff-users .has-success .symbol.required::before {
    font-size: 12px !important;
    height: 13px !important;
    line-height: 13px !important;
    transform: none !important;
}

body.ff-app .ff-users .ff-users-show-dormant-checkbox {
    clear: both !important;
    display: block !important;
    margin: 10px 0 0 !important;
    padding-top: 4px !important;
}

body.ff-app .ff-users .ff-users-show-dormant-checkbox label {
    line-height: 18px !important;
    margin-bottom: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-users .ff-users-show-dormant-checkbox {
    margin-top: 8px !important;
    padding-top: 3px !important;
}

/* Query operations filters: keep the shared filter partial tight without changing other view pages. */
body.ff-app .ff-query .ff-query-filter-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-query .ff-query-filter-row .panel-body {
    padding: 2px 0 !important;
}

body.ff-app .ff-query .ff-sr-card {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 8px !important;
    margin: 0 !important;
    padding-bottom: 6px !important;
}

body.ff-app .ff-query .ff-sr-card > .ff-sr-legend,
body.ff-app .ff-query .ff-sr-card > .ff-filter-actions-slot {
    flex: 0 0 100% !important;
}

body.ff-app .ff-query .ff-sr-card > .ff-waybill-filter-grid,
body.ff-app .ff-query .ff-sr-card > .ff-filter-flow-row,
body.ff-app .ff-query .ff-filter-pc-kgs-group > .ff-filter-inline-row {
    display: contents !important;
}

body.ff-app .ff-query .ff-sr-card > .ff-waybill-filter-grid::before,
body.ff-app .ff-query .ff-sr-card > .ff-waybill-filter-grid::after,
body.ff-app .ff-query .ff-sr-card > .ff-filter-flow-row::before,
body.ff-app .ff-query .ff-sr-card > .ff-filter-flow-row::after,
body.ff-app .ff-query .ff-filter-pc-kgs-group > .ff-filter-inline-row::before,
body.ff-app .ff-query .ff-filter-pc-kgs-group > .ff-filter-inline-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-query .ff-waybill-filter-grid > [class*="col-"],
body.ff-app .ff-query .ff-filter-flow-row > [class*="col-"],
body.ff-app .ff-query .ff-filter-inline-row > [class*="col-"] {
    float: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-query .ff-filter-field .form-group,
body.ff-app .ff-query .ff-filter-field .dx-field {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    margin-bottom: 0 !important;
}

body.ff-app .ff-query .ff-filter-field label {
    align-items: flex-end !important;
    display: flex !important;
    line-height: 14px !important;
    margin-bottom: 1px !important;
    min-height: 14px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

body.ff-app .ff-query .ff-filter-field label .pull-right {
    float: none !important;
    margin-left: auto !important;
    max-width: 78px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app .ff-query .ff-waybill-filter-grid > .ff-filter-id {
    flex: 0 1 245px !important;
    max-width: 270px !important;
    min-width: 175px !important;
}

body.ff-app .ff-query .ff-waybill-filter-grid > .ff-filter-date-type {
    flex: 0 1 150px !important;
    max-width: 170px !important;
    min-width: 130px !important;
}

body.ff-app .ff-query .ff-waybill-filter-grid > .ff-filter-date-period {
    flex: 0 1 138px !important;
    max-width: 148px !important;
    min-width: 128px !important;
}

body.ff-app .ff-query .ff-waybill-filter-grid > .ff-filter-date-range {
    flex: 0 1 305px !important;
    max-width: 325px !important;
    min-width: 275px !important;
}

body.ff-app .ff-query .ff-waybill-filter-grid > .ff-filter-branch,
body.ff-app .ff-query .ff-filter-client-row > .ff-filter-client,
body.ff-app .ff-query .ff-filter-client-row > .ff-filter-agent,
body.ff-app .ff-query .ff-filter-client-row > .ff-filter-driver,
body.ff-app .ff-query .ff-filter-client-row > .ff-filter-vehicle,
body.ff-app .ff-query .ff-filter-service,
body.ff-app .ff-query .ff-filter-town {
    flex: 0 1 220px !important;
    max-width: 260px !important;
    min-width: 165px !important;
}

body.ff-app .ff-query .ff-filter-client-row > .ff-filter-acc,
body.ff-app .ff-query .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-query .ff-filter-client-row > .ff-filter-order,
body.ff-app .ff-query .ff-filter-quote-row > .ff-filter-ref,
body.ff-app .ff-query .ff-filter-quote-row > .ff-filter-medium:not(:first-child),
body.ff-app .ff-query .ff-filter-admin-id-row > .ff-filter-schedule,
body.ff-app .ff-query .ff-filter-admin-id-row > .ff-filter-invoice,
body.ff-app .ff-query .ff-filter-admin-id-row > .ff-filter-internal-id,
body.ff-app .ff-query .ff-filter-admin-id-row > .ff-filter-manifest-no,
body.ff-app .ff-query .ff-filter-admin-id-row > .ff-filter-courier,
body.ff-app .ff-query .ff-filter-receiver-acc,
body.ff-app .ff-query .ff-filter-box,
body.ff-app .ff-query .ff-filter-ring-code {
    flex: 0 1 125px !important;
    max-width: 150px !important;
    min-width: 96px !important;
}

body.ff-app .ff-query .ff-filter-pc-kgs-group {
    align-items: flex-start !important;
    display: flex !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    width: auto !important;
}

body.ff-app .ff-query .ff-filter-pc-kgs-group > .ff-filter-inline-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    margin: 0 !important;
    min-width: 0 !important;
}

body.ff-app .ff-query .ff-filter-pc-kgs-group .ff-filter-pc,
body.ff-app .ff-query .ff-filter-pc-kgs-group .ff-filter-kgs {
    flex: 0 0 62px !important;
    max-width: 62px !important;
    min-width: 58px !important;
    width: 62px !important;
}

body.ff-app .ff-query .ff-filter-zone {
    flex: 0 0 48px !important;
    max-width: 52px !important;
    min-width: 44px !important;
}

body.ff-app .ff-query .ff-filter-zone select.form-control {
    padding-left: 3px !important;
    padding-right: 10px !important;
}

body.ff-app .ff-query .ff-filter-field .ui-select-container,
body.ff-app .ff-query .ff-filter-field .ui-select-bootstrap,
body.ff-app .ff-query .ff-filter-field .ui-select-bootstrap > .ui-select-match,
body.ff-app .ff-query .ff-filter-field .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-query .ff-filter-field .ui-select-bootstrap > .ui-select-match > .ui-select-toggle,
body.ff-app .ff-query .ff-filter-field .ff-dx,
body.ff-app .ff-query .ff-filter-field .dx-widget,
body.ff-app .ff-query .ff-filter-field .dx-texteditor {
    margin-top: 0 !important;
    vertical-align: top !important;
}

body.ff-app .ff-query .ff-filter-admin-id-row > .ff-filter-waybill-id,
body.ff-app .ff-query .ff-filter-admin-id-row > .ff-filter-quote-id {
    flex-basis: 105px !important;
    max-width: 125px !important;
    min-width: 88px !important;
}

body.ff-app .ff-query .ff-filter-party {
    flex: 0 1 255px !important;
    max-width: 315px !important;
    min-width: 190px !important;
}

body.ff-app .ff-query .ff-filter-parcel-desc,
body.ff-app .ff-query .ff-filter-capture-method,
body.ff-app .ff-query .ff-filter-user {
    flex: 0 1 178px !important;
    max-width: 215px !important;
    min-width: 135px !important;
}

body.ff-app .ff-query .ff-filter-bool-group {
    align-items: flex-start !important;
    display: flex !important;
    flex: 1 1 720px !important;
    max-width: 100% !important;
    min-width: 320px !important;
    width: auto !important;
}

body.ff-app .ff-query .ff-filter-bool-group > .ff-filter-inline-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 6px !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-query .ff-filter-bool-group > .ff-filter-inline-row::before,
body.ff-app .ff-query .ff-filter-bool-group > .ff-filter-inline-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-query .ff-filter-bool,
body.ff-app .ff-query .ff-filter-bool-wide {
    flex: 0 1 105px !important;
    max-width: 118px !important;
    min-width: 88px !important;
}

body.ff-app .ff-query .ff-filter-bool-wide {
    flex-basis: 118px !important;
    max-width: 132px !important;
}

body.ff-app .ff-query .ff-filter-bool select,
body.ff-app .ff-query .ff-filter-bool-wide select {
    padding-left: 6px !important;
    padding-right: 16px !important;
}

body.ff-app .ff-query .ff-filter-actions-row {
    margin: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-query .ff-filter-actions {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-query .ff-filter-actions::before,
body.ff-app .ff-query .ff-filter-actions::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-query .ff-filter-actions .valuesonly,
body.ff-app .ff-query .ff-filter-actions .btn {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-query .ff-filter-actions .valuesonly {
    order: 1 !important;
}

body.ff-app .ff-query .ff-filter-actions .ff-filter-clear {
    margin-left: 0 !important;
    margin-right: 0 !important;
    order: 0 !important;
}

body.ff-app .ff-query .ff-filter-actions .ff-filter-keep-open {
    margin-left: auto !important;
    order: 4 !important;
}

body.ff-app .ff-query .ff-filter-actions:not(:has(.ff-filter-keep-open)) .ff-filter-close {
    margin-left: auto !important;
}

body.ff-app .ff-query .ff-filter-actions .ff-filter-close {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 var(--ff-control-h) !important;
    justify-content: center !important;
    min-width: var(--ff-control-h) !important;
    order: 5 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: var(--ff-control-h) !important;
}

body.ff-app .ff-query .ff-filter-actions .ff-filter-search {
    order: 6 !important;
}

body.ff-app .ff-view-collections .ff-filter-collection-status-row .checkbox {
    white-space: normal !important;
}

body.ff-app .ff-view-collections .ff-filter-collection-status-row .checkbox label {
    white-space: normal !important;
}

body.ff-app .ff-view-collections .ff-filter-actions .ff-filter-close {
    order: 5 !important;
}

body.ff-app .ff-view-collections .ff-filter-actions .ff-filter-search {
    order: 6 !important;
}

body.ff-app .ff-query .ff-date-period-group > .ff-date-period-ignore {
    flex-basis: 62px !important;
    min-width: 62px !important;
    width: 62px !important;
}

body.ff-app .ff-query .ff-date-period-group #ignoreDate + label {
    padding-left: 21px !important;
    padding-right: 3px !important;
}

body.ff-app .ff-query .ff-date-period-group #ignoreDate + label::before {
    left: 5px !important;
}

body.ff-app .ff-query .ff-date-period-group #ignoreDate + label::after {
    left: 8px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-sr-card {
    gap: 1px 5px !important;
    padding-bottom: 4px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-field label {
    line-height: 12px !important;
    margin-bottom: 0 !important;
    min-height: 12px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-waybill-filter-grid > .ff-filter-date-period {
    flex-basis: 122px !important;
    max-width: 130px !important;
    min-width: 116px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-waybill-filter-grid > .ff-filter-id {
    flex-basis: 210px !important;
    max-width: 235px !important;
    min-width: 165px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-waybill-filter-grid > .ff-filter-branch,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-client-row > .ff-filter-client,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-client-row > .ff-filter-agent,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-client-row > .ff-filter-driver,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-client-row > .ff-filter-vehicle,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-service,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-town {
    flex-basis: 195px !important;
    max-width: 235px !important;
    min-width: 150px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-date-period-group > .ff-date-period-ignore {
    flex-basis: 56px !important;
    min-width: 56px !important;
    width: 56px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-party {
    flex-basis: 230px !important;
    max-width: 285px !important;
    min-width: 180px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-pc-kgs-group .ff-filter-pc,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-pc-kgs-group .ff-filter-kgs {
    flex-basis: 58px !important;
    max-width: 58px !important;
    min-width: 54px !important;
    width: 58px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-zone {
    flex-basis: 44px !important;
    max-width: 48px !important;
    min-width: 42px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-parcel-desc,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-capture-method,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-user {
    flex-basis: 160px !important;
    max-width: 195px !important;
    min-width: 128px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-bool-group {
    flex-basis: 620px !important;
    min-width: 280px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-bool-group > .ff-filter-inline-row {
    gap: 1px 4px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-bool,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-bool-wide {
    flex-basis: 90px !important;
    max-width: 102px !important;
    min-width: 82px !important;
}

/* View Manifests final filter alignment: pack filter fields without changing shared filter layout. */
body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-manifest-date-period,
body.ff-app .ff-view-manifests .ff-manifest-filter-row > .ff-manifest-date-period {
    flex: 0 0 184px !important;
    max-width: 184px !important;
    min-width: 184px !important;
    width: 184px !important;
}

body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-manifest-type-filter,
body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-manifest-agent-filter,
body.ff-app .ff-view-manifests .ff-manifest-filter-row > .ff-manifest-type-filter,
body.ff-app .ff-view-manifests .ff-manifest-filter-row > .ff-manifest-agent-filter {
    flex: 0 0 16.66666667% !important;
    max-width: 16.66666667% !important;
    min-width: 0 !important;
    width: 16.66666667% !important;
}

body.ff-app .ff-view-manifests .ff-manifest-agent-filter :is(.ff-control, .ui-select-container, .ui-select-bootstrap),
body.ff-app .ff-view-manifests .ff-manifest-type-filter select.form-control {
    width: 100% !important;
}

/* View Manifests final action alignment: keep actions at the far right and centre the Date Period Ignore tick. */
body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-manifest-filter-actions,
body.ff-app .ff-view-manifests .ff-manifest-filter-actions {
    align-self: flex-end !important;
    display: flex !important;
    flex: 1 1 320px !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    max-width: none !important;
    min-width: 300px !important;
    padding-top: 0 !important;
    width: auto !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-submit {
    align-items: center !important;
    display: flex !important;
    gap: 10px !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-view-manifests .ff-manifest-keep-filter {
    margin-left: 0 !important;
}

body.ff-app .ff-view-manifests.ff-query-grid-page .ff-filter-date-period .ff-date-period-group,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifests.ff-query-grid-page .ff-filter-date-period .ff-date-period-group {
    align-items: stretch !important;
    overflow: hidden !important;
}

body.ff-app .ff-view-manifests.ff-query-grid-page .ff-filter-date-period .ff-date-period-ignore,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifests.ff-query-grid-page .ff-filter-date-period .ff-date-period-ignore {
    align-items: center !important;
    align-self: stretch !important;
    display: flex !important;
    height: var(--ff-control-h) !important;
    justify-content: flex-start !important;
    line-height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    overflow: hidden !important;
    position: relative !important;
}

body.ff-app .ff-view-manifests.ff-query-grid-page .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifests.ff-query-grid-page .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label {
    align-items: center !important;
    display: flex !important;
    height: var(--ff-control-h) !important;
    line-height: 1 !important;
    margin: 0 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding: 0 3px 0 21px !important;
    position: relative !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
}

body.ff-app .ff-view-manifests.ff-query-grid-page .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifests.ff-query-grid-page .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before {
    height: 12px !important;
    left: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 12px !important;
}

body.ff-app .ff-view-manifests.ff-query-grid-page .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifests.ff-query-grid-page .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after {
    height: 4px !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-70%) rotate(-45deg) !important;
    width: 7px !important;
}

/* View Manifest Routes final compact Date Period sizing. */
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-filters {
    flex-basis: 390px !important;
    max-width: 405px !important;
    min-width: 350px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period {
    flex: 0 0 124px !important;
    max-width: 124px !important;
    min-width: 124px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period-group {
    align-items: stretch !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    overflow: hidden !important;
    width: 124px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period-ignore {
    align-items: center !important;
    display: flex !important;
    height: var(--ff-control-h) !important;
    justify-content: flex-start !important;
    line-height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    min-width: 0 !important;
    padding: 0 !important;
    width: 52px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period #ignoreDate + label {
    align-items: center !important;
    display: flex !important;
    font-size: var(--ff-control-font-size) !important;
    height: var(--ff-control-h) !important;
    line-height: 1 !important;
    margin: 0 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding: 0 2px 0 18px !important;
    width: 52px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period #ignoreDate + label::before {
    height: 11px !important;
    left: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 11px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period #ignoreDate + label::after {
    height: 4px !important;
    left: 7px !important;
    top: 50% !important;
    transform: translateY(-70%) rotate(-45deg) !important;
    width: 7px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period select.form-control {
    height: var(--ff-control-h) !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    min-width: 0 !important;
    padding: 0 4px !important;
    width: 100% !important;
}

/* View Manifest Routes final filter date alignment. Keep Date Range beside Date Period. */
body.ff-app .ff-view-manifest-routes .ff-route-date-filters {
    flex: 0 1 460px !important;
    max-width: 480px !important;
    min-width: 408px !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-date-row {
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 3px 8px !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-date-period {
    flex: 0 0 140px !important;
    max-width: 140px !important;
    min-width: 140px !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-date-range {
    flex: 1 1 260px !important;
    max-width: 300px !important;
    min-width: 260px !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-date-range .range-picker {
    display: flex !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    width: 100% !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-date-range .range-picker .start-date,
body.ff-app .ff-view-manifest-routes .ff-route-date-range .range-picker .end-date {
    flex: 1 1 112px !important;
    max-width: none !important;
    min-width: 104px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-filters {
    flex-basis: 408px !important;
    max-width: 420px !important;
    min-width: 384px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period {
    flex: 0 0 116px !important;
    max-width: 116px !important;
    min-width: 116px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period-group {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    width: 116px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period-ignore {
    width: 48px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period #ignoreDate + label {
    padding-left: 16px !important;
    width: 48px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period #ignoreDate + label::before {
    left: 3px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period #ignoreDate + label::after {
    left: 6px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-range {
    flex: 1 1 260px !important;
    max-width: 292px !important;
    min-width: 260px !important;
}

@media (max-width: 760px) {
    body.ff-app .ff-view-manifest-routes .ff-route-date-filters,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-filters {
        flex: 1 1 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body.ff-app .ff-view-manifest-routes .ff-route-date-row {
        flex-wrap: wrap !important;
    }

    body.ff-app .ff-view-manifest-routes .ff-route-date-period,
    body.ff-app .ff-view-manifest-routes .ff-route-date-range,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-range {
        flex: 1 1 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body.ff-app .ff-view-manifest-routes .ff-route-date-period-group,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period-group {
        width: 100% !important;
    }
}

/* Debriefing filter width polish.
   Keep seldom-used/numeric filters compact so wrapped rows do not waste a full line. */
body.ff-app .ff-debriefing .ff-sr-card {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
}

body.ff-app .ff-debriefing .ff-sr-card > .ff-sr-legend,
body.ff-app .ff-debriefing .ff-sr-card > .ff-filter-actions-slot,
body.ff-app .ff-debriefing .ff-sr-card > .ff-waybill-filter-grid {
    flex: 0 0 100% !important;
}

body.ff-app .ff-debriefing .ff-waybill-filter-grid {
    align-items: flex-start !important;
    display: grid !important;
    gap: 4px 10px !important;
    grid-template-columns:
        minmax(108px, 112px)
        minmax(165px, 190px)
        minmax(146px, 158px)
        minmax(248px, 260px)
        minmax(180px, 220px) !important;
}

body.ff-app .ff-debriefing .ff-waybill-filter-grid::before,
body.ff-app .ff-debriefing .ff-waybill-filter-grid::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-debriefing .ff-waybill-filter-grid > [class*="col-"] {
    float: none !important;
    margin: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-debriefing .ff-sr-card > .ff-filter-client-row,
body.ff-app .ff-debriefing .ff-sr-card > .ff-filter-admin-id-row,
body.ff-app .ff-debriefing .ff-sr-card > .ff-filter-waybill-route-row {
    display: contents !important;
}

body.ff-app .ff-debriefing .ff-sr-card > .ff-filter-client-row::before,
body.ff-app .ff-debriefing .ff-sr-card > .ff-filter-client-row::after,
body.ff-app .ff-debriefing .ff-sr-card > .ff-filter-admin-id-row::before,
body.ff-app .ff-debriefing .ff-sr-card > .ff-filter-admin-id-row::after,
body.ff-app .ff-debriefing .ff-sr-card > .ff-filter-waybill-route-row::before,
body.ff-app .ff-debriefing .ff-sr-card > .ff-filter-waybill-route-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-debriefing .ff-filter-field .form-group,
body.ff-app .ff-debriefing .ff-filter-field .dx-field {
    margin-bottom: 0 !important;
}

body.ff-app .ff-debriefing .ff-filter-field label {
    display: block !important;
    line-height: 18px !important;
    margin-bottom: 1px !important;
    min-height: 20px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-debriefing .ff-filter-field :is(.ff-control, .ff-ui, .ui-select-container, .ui-select-bootstrap, .ui-select-match, .ui-select-toggle, .form-control, .ff-dx, .dx-widget, .dx-texteditor) {
    height: var(--ff-control-h) !important;
    margin-top: 0 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    width: 100% !important;
}

body.ff-app .ff-debriefing .ff-filter-client-row > .ff-filter-order {
    flex: 0 1 112px !important;
    max-width: 125px !important;
    min-width: 96px !important;
}

body.ff-app .ff-debriefing .ff-filter-waybill-route-row > .ff-filter-sender,
body.ff-app .ff-debriefing .ff-filter-waybill-route-row > .ff-filter-receiver {
    flex: 0 1 150px !important;
    max-width: 185px !important;
    min-width: 128px !important;
}

body.ff-app .ff-debriefing .ff-filter-waybill-route-row > .ff-filter-parcel-desc {
    flex: 0 1 156px !important;
    max-width: 180px !important;
    min-width: 120px !important;
}

/* Generate Invoice filter width polish.
   Keep high-volume search fields compact so the filter area wraps neatly. */
body.ff-app .ff-generate-invoice .ff-sr-card {
    align-items: flex-start !important;
    column-gap: 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 5px !important;
}

body.ff-app .ff-generate-invoice .ff-sr-card > .ff-sr-legend,
body.ff-app .ff-generate-invoice .ff-sr-card > .ff-filter-actions-slot {
    flex: 0 0 100% !important;
}

body.ff-app .ff-generate-invoice .ff-sr-card > .ff-waybill-filter-grid,
body.ff-app .ff-generate-invoice .ff-sr-card > .ff-filter-flow-row,
body.ff-app .ff-generate-invoice .ff-filter-pc-kgs-group > .ff-filter-inline-row {
    display: contents !important;
}

body.ff-app .ff-generate-invoice .ff-sr-card > .ff-waybill-filter-grid::before,
body.ff-app .ff-generate-invoice .ff-sr-card > .ff-waybill-filter-grid::after,
body.ff-app .ff-generate-invoice .ff-sr-card > .ff-filter-flow-row::before,
body.ff-app .ff-generate-invoice .ff-sr-card > .ff-filter-flow-row::after,
body.ff-app .ff-generate-invoice .ff-filter-pc-kgs-group > .ff-filter-inline-row::before,
body.ff-app .ff-generate-invoice .ff-filter-pc-kgs-group > .ff-filter-inline-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-generate-invoice .ff-waybill-filter-grid > [class*="col-"],
body.ff-app .ff-generate-invoice .ff-filter-flow-row > [class*="col-"],
body.ff-app .ff-generate-invoice .ff-filter-inline-row > [class*="col-"] {
    float: none !important;
    margin: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-generate-invoice .ff-waybill-filter-grid > .ff-filter-date-type {
    flex: 0 0 136px !important;
    max-width: 136px !important;
    min-width: 136px !important;
    width: 136px !important;
}

body.ff-app .ff-generate-invoice .ff-waybill-filter-grid > .ff-filter-date-period {
    flex: 0 0 172px !important;
    max-width: 172px !important;
    min-width: 172px !important;
    width: 172px !important;
}

body.ff-app .ff-generate-invoice .ff-waybill-filter-grid > .ff-filter-date-range {
    box-sizing: border-box !important;
    flex: 0 0 224px !important;
    max-width: 224px !important;
    min-width: 224px !important;
    padding-left: 8px !important;
    width: 224px !important;
}

body.ff-app .ff-generate-invoice .ff-waybill-filter-grid > .ff-filter-branch {
    flex: 0 1 170px !important;
    max-width: 195px !important;
    min-width: 142px !important;
}

body.ff-app .ff-generate-invoice .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-generate-invoice .ff-filter-client-row > .ff-filter-order,
body.ff-app .ff-generate-invoice .ff-filter-admin-id-row > .ff-filter-schedule {
    flex: 0 1 118px !important;
    max-width: 134px !important;
    min-width: 96px !important;
}

body.ff-app .ff-generate-invoice .ff-filter-waybill-route-row > .ff-filter-sender,
body.ff-app .ff-generate-invoice .ff-filter-waybill-route-row > .ff-filter-receiver {
    flex: 0 1 160px !important;
    max-width: 190px !important;
    min-width: 132px !important;
}

body.ff-app .ff-generate-invoice .ff-filter-waybill-route-row > .ff-filter-parcel-desc {
    flex: 0 1 156px !important;
    max-width: 180px !important;
    min-width: 120px !important;
}

body.ff-app .ff-generate-invoice .ff-filter-pc-kgs-group {
    align-items: flex-start !important;
    display: flex !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    width: auto !important;
}

body.ff-app .ff-generate-invoice .ff-filter-pc-kgs-group > .ff-filter-inline-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
    margin: 0 !important;
    min-width: 0 !important;
}

body.ff-app .ff-generate-invoice .ff-filter-pc-kgs-group .ff-filter-pc,
body.ff-app .ff-generate-invoice .ff-filter-pc-kgs-group .ff-filter-kgs {
    flex: 0 0 92px !important;
    max-width: 96px !important;
    min-width: 82px !important;
    width: 92px !important;
}

body.ff-app .ff-generate-invoice .ff-filter-admin-id-row > .ff-filter-hub,
body.ff-app .ff-generate-invoice .ff-filter-admin-id-row > .ff-filter-origin-hub,
body.ff-app .ff-generate-invoice .ff-filter-admin-id-row > .ff-filter-destination-hub {
    flex: 0 1 178px !important;
    max-width: 210px !important;
    min-width: 140px !important;
}

body.ff-app .ff-generate-invoice .ff-filter-admin-id-row > .ff-filter-destination-hub {
    margin-right: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-generate-invoice .ff-filter-client-row > .ff-filter-ref,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-generate-invoice .ff-filter-client-row > .ff-filter-order,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-generate-invoice .ff-filter-admin-id-row > .ff-filter-schedule {
    flex-basis: 108px !important;
    max-width: 124px !important;
    min-width: 92px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-generate-invoice .ff-filter-waybill-route-row > .ff-filter-sender,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-generate-invoice .ff-filter-waybill-route-row > .ff-filter-receiver,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-generate-invoice .ff-filter-waybill-route-row > .ff-filter-parcel-desc {
    flex-basis: 145px !important;
    max-width: 170px !important;
    min-width: 118px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-generate-invoice .ff-filter-admin-id-row > .ff-filter-hub,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-generate-invoice .ff-filter-admin-id-row > .ff-filter-origin-hub,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-generate-invoice .ff-filter-admin-id-row > .ff-filter-destination-hub {
    flex-basis: 160px !important;
    max-width: 190px !important;
    min-width: 128px !important;
}

/* Generate Invoice date row final tightening. */
body.ff-app .ff-generate-invoice #page-title.ff-page-header {
    margin-bottom: 0 !important;
}

body.ff-app .ff-generate-invoice > .container-fullw,
body.ff-app .ff-generate-invoice > .container-fluid.container-fullw,
body.ff-app .ff-generate-invoice > .container-fluid.container-fullw.bg-white {
    padding-top: 0 !important;
}

body.ff-app .ff-generate-invoice > .container-fullw > .row,
body.ff-app .ff-generate-invoice > .container-fluid.container-fullw > .row {
    margin-top: 0 !important;
}

body.ff-app .ff-generate-invoice .accordion-no-display .panel-body,
body.ff-app .ff-generate-invoice .accordion-no-display fieldset,
body.ff-app .ff-generate-invoice .accordion-no-display .ff-sr-card {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-generate-invoice .ff-invoice-generate-date-row {
    align-items: flex-start !important;
    gap: 0 6px !important;
    height: auto !important;
    margin: 0 0 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

body.ff-app .ff-generate-invoice .ff-invoice-generate-client-grid {
    clear: both !important;
    position: relative !important;
    z-index: 1 !important;
}

body.ff-app .ff-generate-invoice .ff-invoice-generate-date-row > [class*="col-"] {
    align-items: flex-start !important;
    display: block !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-generate-invoice .ff-invoice-generate-date-row .form-group {
    display: block !important;
    height: auto !important;
    margin: 0 !important;
    min-height: 0 !important;
}

body.ff-app .ff-generate-invoice .ff-invoice-generate-date-row label {
    display: block !important;
    line-height: 14px !important;
    margin: 0 0 1px !important;
    min-height: 14px !important;
}

body.ff-app .ff-generate-invoice .ff-invoice-generate-date-row .input-icon,
body.ff-app .ff-generate-invoice .ff-invoice-generate-date-row input.form-control {
    flex: 0 0 120px !important;
    margin: 0 !important;
    width: 120px !important;
}

body.ff-app .ff-generate-invoice .ff-invoice-generate-date-row + .ff-invoice-generate-client-grid {
    margin-top: 0 !important;
}

/* View Invoices final filter spacing. */
body.ff-app .ff-query.ff-view-invoices .ff-finance-primary-filters,
body.ff-app .ff-query.ff-view-invoices .ff-finance-secondary-filters,
body.ff-app .ff-query.ff-view-invoices .ff-finance-user-row,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-primary-filters,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-secondary-filters,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-user-row,
body.ff-app .ff-view-invoices.ff-query-grid-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) > .ff-finance-primary-filters,
body.ff-app .ff-view-invoices.ff-query-grid-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) > .ff-finance-secondary-filters {
    gap: 0 6px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

body.ff-app .ff-query.ff-view-invoices .ff-finance-primary-filters .form-group,
body.ff-app .ff-query.ff-view-invoices .ff-finance-secondary-filters .form-group,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-primary-filters .form-group,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-secondary-filters .form-group {
    margin-bottom: 0 !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-primary-filters,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-secondary-filters {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-date-block,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-date-block > .row,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-user-group,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-user-row {
    display: contents !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-primary-filters::before,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-primary-filters::after,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-secondary-filters::before,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-secondary-filters::after,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-date-block > .row::before,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-date-block > .row::after,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-user-row::before,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-user-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-primary-filters > [class*="col-"],
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-secondary-filters > [class*="col-"],
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-date-block > .row > [class*="col-"],
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-user-row > [class*="col-"],
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-filter-actions-row > [class*="col-"] {
    float: none !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-invoice-number {
    flex: 0 0 170px !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-date-period {
    flex: 0 0 168px !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-date-range {
    flex: 0 0 300px !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-branch-filter {
    flex: 0 0 180px !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-client-filter {
    flex: 1 1 200px !important;
    min-width: 130px !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-batch-filter,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-waybill-filter,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-ref-filter {
    flex: 0 0 205px !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-user-filter,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-webuser-filter {
    flex: 0 0 220px !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-acc-filter {
    flex: 0 0 175px !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-filter-actions {
    justify-content: flex-start !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-keep-filter {
    margin-left: auto !important;
}

@media (max-width: 760px) {
    body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-invoice-number,
    body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-date-period,
    body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-date-range,
    body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-branch-filter,
    body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-client-filter,
    body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-batch-filter,
    body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-waybill-filter,
    body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-ref-filter,
    body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-user-filter,
    body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-webuser-filter,
    body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-acc-filter {
        flex: 1 1 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-grid-toolbar-row.ng-hide {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* View Tracking final filter and empty-grid chrome cleanup. */
body.ff-app .ff-view-tracking > .container-fullw,
body.ff-app .ff-view-tracking > .container-fullw > [block-ui],
body.ff-app .ff-view-tracking > .container-fullw > [block-ui] > .row,
body.ff-app .ff-view-tracking .accordion-no-display {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-view-tracking .accordion-no-display > .accordion,
body.ff-app .ff-view-tracking .accordion-no-display .panel,
body.ff-app .ff-view-tracking .accordion-no-display .panel-collapse,
body.ff-app .ff-view-tracking .accordion-no-display .panel-body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-view-tracking .ff-sr-card {
    margin-top: 0 !important;
}

body.ff-app .ff-view-tracking .ff-grid-toolbar-row,
body.ff-app .ff-view-tracking .ff-grid-result-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-view-tracking .ff-waybill-filter-grid {
    align-items: flex-start !important;
    column-gap: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 4px !important;
}

body.ff-app .ff-view-tracking .ff-waybill-filter-grid::before,
body.ff-app .ff-view-tracking .ff-waybill-filter-grid::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-view-tracking .ff-waybill-filter-grid > [class*="col-"] {
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-view-tracking .ff-waybill-filter-grid > .ff-filter-id {
    flex: 0 1 153px !important;
    max-width: 153px !important;
    min-width: 128px !important;
    order: 1 !important;
}

body.ff-app .ff-view-tracking .ff-waybill-filter-grid > .ff-filter-date-type {
    flex: 0 1 98px !important;
    max-width: 98px !important;
    min-width: 92px !important;
    order: 2 !important;
}

body.ff-app .ff-view-tracking .ff-filter-date-type .ui-select-toggle > a.btn.btn-xs.btn-link {
    display: none !important;
    height: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
}

body.ff-app .ff-view-tracking .ff-filter-date-type .ui-select-match-text.ui-select-allow-clear {
    max-width: calc(100% - 16px) !important;
}

body.ff-app .ff-view-tracking .ff-waybill-filter-grid > .ff-filter-date-period {
    flex: 0 0 240px !important;
    max-width: 240px !important;
    min-width: 220px !important;
    order: 3 !important;
}

body.ff-app .ff-view-tracking .ff-waybill-filter-grid > .ff-filter-date-range {
    flex: 0 0 420px !important;
    max-width: 420px !important;
    min-width: 360px !important;
    order: 4 !important;
}

body.ff-app .ff-view-tracking .ff-waybill-filter-grid > .ff-filter-branch {
    flex: 0 1 374px !important;
    max-width: 374px !important;
    min-width: 280px !important;
    order: 5 !important;
}

@media (max-width: 900px) {
    body.ff-app .ff-view-tracking .ff-waybill-filter-grid > .ff-filter-id,
    body.ff-app .ff-view-tracking .ff-waybill-filter-grid > .ff-filter-date-type,
    body.ff-app .ff-view-tracking .ff-waybill-filter-grid > .ff-filter-date-period,
    body.ff-app .ff-view-tracking .ff-waybill-filter-grid > .ff-filter-date-range,
    body.ff-app .ff-view-tracking .ff-waybill-filter-grid > .ff-filter-branch {
        flex-basis: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }
}

body.ff-app .ff-view-tracking .ff-filter-client-row {
    gap: 4px 8px !important;
}

body.ff-app .ff-view-tracking .ff-filter-client-row > .ff-filter-client {
    order: 1;
}

body.ff-app .ff-view-tracking .ff-filter-client-row > .ff-filter-acc {
    flex: 0 1 112px !important;
    max-width: 112px !important;
    min-width: 112px !important;
    order: 2;
}

body.ff-app .ff-view-tracking .ff-filter-client-row > .ff-filter-order {
    flex: 0 1 112px !important;
    max-width: 112px !important;
    min-width: 112px !important;
    order: 3;
}

body.ff-app .ff-view-tracking .ff-filter-client-row > .ff-filter-agent {
    order: 4;
}

body.ff-app .ff-view-tracking .ff-filter-client-row > .ff-filter-driver {
    order: 5;
}

body.ff-app .ff-view-tracking .ff-filter-client-row > .ff-filter-vehicle {
    order: 6;
}

body.ff-app .ff-view-tracking .ff-filter-manifest-row > .ff-filter-tracking-actions {
    align-self: flex-end !important;
    flex: 1 1 480px !important;
    max-width: none !important;
    min-width: 420px !important;
    order: 99 !important;
}

body.ff-app .ff-view-tracking .ff-filter-tracking-actions > .ff-filter-actions-row {
    display: contents !important;
}

body.ff-app .ff-view-tracking .ff-filter-tracking-actions .ff-filter-actions {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    min-height: var(--ff-control-h) !important;
    padding: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-view-tracking .ff-filter-tracking-actions .ff-filter-actions > * {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

body.ff-app .ff-view-tracking .ff-filter-tracking-actions .ff-filter-show-dormant {
    margin-left: 0 !important;
    margin-right: auto !important;
    order: 1 !important;
}

body.ff-app .ff-view-tracking .ff-filter-tracking-actions .ff-filter-close {
    flex: 0 0 var(--ff-control-h) !important;
    order: 4 !important;
}

body.ff-app .ff-view-tracking .ff-filter-tracking-actions .ff-filter-keep-open {
    margin-left: 0 !important;
    margin-right: 0 !important;
    order: 3 !important;
}

body.ff-app .ff-view-tracking .ff-filter-tracking-actions .ff-filter-search {
    order: 5 !important;
}

@media (max-width: 900px) {
    body.ff-app .ff-view-tracking .ff-filter-manifest-row > .ff-filter-tracking-actions {
        flex-basis: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }
}

body.ff-app .ff-view-tracking .ff-grid-toolbar-row.ng-hide {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

body.ff-app .ff-view-tracking #gridContainer.ff-grid-empty .dx-datagrid-header-panel,
body.ff-app .ff-view-tracking #gridContainer.ff-grid-empty .dx-datagrid-headers,
body.ff-app .ff-view-tracking #gridContainer.ff-grid-empty .dx-datagrid-rowsview,
body.ff-app .ff-view-tracking #gridContainer.ff-grid-empty .dx-datagrid-total-footer,
body.ff-app .ff-view-tracking #gridContainer.ff-grid-empty .dx-datagrid-nodata {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* View Images final filter polish.
   Keep this late so shared query-grid Date Period sizing does not steal width from the select. */
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-imaging-list .ff-image-date-period {
    flex: 0 0 124px !important;
    max-width: 124px !important;
    min-width: 118px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-group {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    height: var(--ff-control-h) !important;
    max-width: 124px !important;
    min-height: var(--ff-control-h) !important;
    width: 124px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-ignore {
    flex: 0 0 48px !important;
    height: var(--ff-control-h) !important;
    max-width: 48px !important;
    min-height: var(--ff-control-h) !important;
    min-width: 48px !important;
    width: 48px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-ignore-label {
    align-items: center !important;
    display: inline-flex !important;
    font-size: 10px !important;
    height: var(--ff-control-h) !important;
    line-height: var(--ff-control-h) !important;
    margin: 0 !important;
    padding: 0 2px 0 14px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-select {
    height: var(--ff-control-h) !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period {
    flex: 0 0 100px !important;
    max-width: 100px !important;
    min-width: 96px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-group {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    max-width: 100px !important;
    min-height: var(--ff-control-h) !important;
    width: 100px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-ignore {
    flex: 0 0 38px !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    max-width: 38px !important;
    min-height: var(--ff-control-h) !important;
    min-width: 38px !important;
    width: 38px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-ignore-label {
    align-items: center !important;
    display: inline-flex !important;
    font-size: 9px !important;
    height: var(--ff-control-h) !important;
    line-height: var(--ff-control-h) !important;
    margin: 0 !important;
    padding: 0 1px 0 11px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-select {
    height: var(--ff-control-h) !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-period-group,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-group {
    align-items: center !important;
    box-sizing: border-box !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    overflow: hidden !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-period-ignore,
body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-period-select,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-ignore,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-select {
    box-sizing: border-box !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-period-ignore,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-ignore {
    align-items: center !important;
    display: flex !important;
    line-height: 1 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-period-ignore-label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-ignore-label {
    align-items: center !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    height: calc(var(--ff-control-h) - 2px) !important;
    line-height: 1 !important;
    max-height: calc(var(--ff-control-h) - 2px) !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-period-select,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-select {
    line-height: 1.2 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

/* Tariffs filter width polish.
   Keep this away from grid row-height rules; the accepted normal/compact grid density stays unchanged. */
body.ff-app .ff-tariffs #gridContainer .dx-datagrid-search-panel {
    max-width: 120px !important;
    min-width: 100px !important;
    width: 120px !important;
}

body.ff-app .ff-tariffs .ff-tariff-add-row-btn {
    align-items: center !important;
    display: inline-flex !important;
    justify-content: center !important;
    min-width: 30px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

body.ff-app .ff-tariffs .ff-tariff-add-row-btn .fa {
    line-height: 1 !important;
    margin: 0 !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel > fieldset.ff-sr-legend {
    align-items: flex-start !important;
    column-gap: 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 2px !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel > fieldset.ff-sr-legend > legend {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel > fieldset.ff-sr-legend > .row:not(.ff-filter-final-row) {
    display: contents !important;
    margin: 0 !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel > fieldset.ff-sr-legend > .row:not(.ff-filter-final-row)::before,
body.ff-app .ff-tariffs .ff-tariff-filter-panel > fieldset.ff-sr-legend > .row:not(.ff-filter-final-row)::after {
    display: none !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel > fieldset.ff-sr-legend > .row:not(.ff-filter-final-row) > [class*="col-"] {
    flex: 0 1 190px !important;
    float: none !important;
    max-width: 230px !important;
    min-width: 130px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel .form-group,
body.ff-app .ff-tariffs .ff-tariff-filter-panel :is(.form-control, .ff-control, .ff-ui, .ui-select-container, .ui-select-match) {
    max-width: 100% !important;
    width: 100% !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel .form-group.ff-tariff-filter-populated label {
    color: color-mix(in srgb, var(--primary) 78%, var(--text)) !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel .form-group.ff-tariff-filter-populated
    :is(.form-control, .ui-select-match, .ui-select-container .ui-select-match, .multiselect-group .btn, .multiselect-group button) {
    background: color-mix(in srgb, var(--primary) 5%, var(--surface)) !important;
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border)) !important;
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--primary) 48%, transparent) !important;
}

body.ff-app .ff-tariffs .ff-tariff-id-field,
body.ff-app .ff-tariffs .ff-tariff-category-field {
    flex: 0 1 145px !important;
    max-width: 160px !important;
    min-width: 120px !important;
}

body.ff-app .ff-tariffs .ff-tariff-type-field {
    flex: 0 1 220px !important;
    max-width: 250px !important;
    min-width: 170px !important;
}

body.ff-app .ff-tariffs .ff-tariff-effective-date {
    flex: 0 0 260px !important;
    max-width: 260px !important;
    min-width: 250px !important;
    width: 260px !important;
}

body.ff-app .ff-tariffs .ff-tariff-date-group,
body.ff-app .ff-tariffs .ff-tariff-effective-date .ff-tariff-date-group {
    align-items: stretch !important;
    display: flex !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
    width: 100% !important;
}

body.ff-app .ff-tariffs .ff-tariff-effective-date .ff-tariff-date-group {
    width: 100% !important;
}

body.ff-app .ff-tariffs .ff-tariff-date-group > .input-group-addon,
body.ff-app .ff-tariffs .ff-tariff-effective-date .ff-tariff-date-group > .input-group-addon {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 74px !important;
    justify-content: center !important;
    max-width: 74px !important;
    min-width: 74px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    width: 74px !important;
}

body.ff-app .ff-tariffs .ff-tariff-date-icon,
body.ff-app .ff-tariffs .ff-tariff-effective-date .ff-tariff-date-group > .ff-tariff-date-icon {
    display: block !important;
    flex: 1 1 auto !important;
    max-width: calc(100% - 74px) !important;
    min-width: 0 !important;
    width: auto !important;
}

body.ff-app .ff-tariffs .ff-tariff-effective-date .ff-tariff-date-icon > input.form-control[uib-datepicker-popup] {
    max-width: 100% !important;
    width: 100% !important;
}

body.ff-app .ff-tariffs .ff-tariff-account-field {
    flex: 0 1 132px !important;
    margin-left: 0 !important;
    max-width: 150px !important;
    min-width: 120px !important;
}

body.ff-app .ff-tariffs .ff-tariff-account-field textarea.form-control {
    height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    overflow-y: auto !important;
    resize: none !important;
}

body.ff-app .ff-tariffs .ff-tariff-client-field {
    flex: 0 1 520px !important;
    max-width: 620px !important;
    min-width: 270px !important;
}

body.ff-app .ff-tariffs .ff-tariff-service-field {
    flex: 0 1 260px !important;
    max-width: 320px !important;
    min-width: 190px !important;
}

body.ff-app .ff-tariffs .ff-tariff-agent-field {
    flex: 0 1 220px !important;
    max-width: 260px !important;
    min-width: 160px !important;
}

body.ff-app .ff-tariffs .ff-tariff-sender-field,
body.ff-app .ff-tariffs .ff-tariff-receiver-field {
    flex: 0 1 250px !important;
    max-width: 300px !important;
    min-width: 180px !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel > fieldset.ff-sr-legend > .ff-filter-final-row {
    align-items: flex-end !important;
    display: flex !important;
    flex: 0 0 100% !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel > fieldset.ff-sr-legend > .ff-filter-final-row::before,
body.ff-app .ff-tariffs .ff-tariff-filter-panel > fieldset.ff-sr-legend > .ff-filter-final-row::after {
    display: none !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel .ff-filter-final-row > [class*="col-"] {
    float: none !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel .ff-filter-area-from,
body.ff-app .ff-tariffs .ff-tariff-filter-panel .ff-filter-area-to {
    flex: 0 1 170px !important;
    max-width: 180px !important;
    min-width: 145px !important;
    padding-left: 0 !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel .ff-filter-footer-actions {
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 260px !important;
    padding-right: 0 !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel .ff-filter-footer-actions-inner {
    align-items: center !important;
    display: flex !important;
    gap: 10px !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel .ff-filter-footer-actions-inner .btn {
    flex: 0 0 auto !important;
    margin: 0 !important;
    min-width: 120px !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel .ff-filter-footer-actions-inner .ff-filter-close {
    flex-basis: var(--ff-control-h) !important;
    min-width: var(--ff-control-h) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: var(--ff-control-h) !important;
}

/* Service Master layout polish.
   Scope this tightly; older inline label rules on this page caused caption/control gaps and clipped checkbox labels. */
body.ff-app .ff-services .ff-services-form {
    max-width: 1180px;
}

body.ff-app .ff-services .form-group {
    margin-bottom: 8px;
}

body.ff-app .ff-services .form-group > label {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    justify-content: flex-start;
    margin-bottom: 4px;
    max-width: 100%;
    min-height: 16px;
    overflow: visible;
    white-space: nowrap;
    width: auto;
}

body.ff-app .ff-services .form-group > label.width100 {
    width: auto !important;
}

body.ff-app .ff-services .form-group > label .pull-right {
    float: none !important;
    margin-left: 8px;
}

body.ff-app .ff-services .ff-services-detail-row {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
}

body.ff-app .ff-services .ff-services-fields {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

body.ff-app .ff-services .ff-services-fields > .row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-services .ff-services-fields > .row::before,
body.ff-app .ff-services .ff-services-fields > .row::after {
    display: none !important;
}

body.ff-app .ff-services .ff-services-fields > .row > [class*="col-"] {
    flex: 0 1 132px;
    float: none !important;
    max-width: 160px;
    min-width: 112px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-services .ff-services-fields > .row > .col-md-8 {
    flex: 1 1 420px;
    max-width: 520px;
    min-width: 260px;
}

body.ff-app .ff-services .ff-services-fields > .row > .col-md-10 {
    flex: 1 1 680px;
    max-width: 820px;
    min-width: 280px;
}

body.ff-app .ff-services .ff-services-fields :is(.form-control, .ff-control, .ff-ui, .ui-select-container, .ui-select-match) {
    max-width: 100%;
    width: 100%;
}

body.ff-app .ff-services .ff-services-flags {
    align-content: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    min-width: 250px;
    padding-top: 19px;
}

body.ff-app .ff-services .ff-services-flags .checkbox {
    flex: 0 1 124px;
    margin: 0 !important;
    min-height: 22px;
    overflow: visible;
    white-space: nowrap;
}

body.ff-app .ff-services .ff-services-flags label {
    overflow: visible;
    white-space: nowrap;
}

body.ff-app .ff-services .ff-services-actions-row .col-md-6 {
    max-width: 560px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-services .form-group {
    margin-bottom: 5px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-services .ff-services-fields > .row {
    gap: 5px 8px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-services .ff-services-fields > .row > [class*="col-"] {
    flex-basis: 120px;
    min-width: 104px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-services .ff-services-fields > .row > .col-md-8 {
    flex-basis: 360px;
    min-width: 240px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-services .ff-services-flags {
    gap: 4px 12px;
    padding-top: 17px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-services .ff-services-flags .checkbox {
    flex-basis: 112px;
    min-height: 18px;
}

/* Left navigation hit-area final lock.
   Make each visible menu row act as one target, including caption whitespace and collapsed flyout rows. */
body.ff-app #sidebar nav > ul.main-navigation-menu > li,
body.ff-app #sidebar nav ul.sub-menu > li,
body.ff-app .app-aside > ul.sub-menu > li {
    cursor: pointer !important;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li > a,
body.ff-app #sidebar nav ul.sub-menu > li > a,
body.ff-app .app-aside > ul.sub-menu > li > a {
    align-items: center !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    display: flex !important;
    min-height: 40px;
    position: relative !important;
    width: 100% !important;
    z-index: 1;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li > a {
    min-height: 44px;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li > a .item-content {
    align-items: center !important;
    display: flex !important;
    min-height: 44px;
    width: 100% !important;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li > a .item-inner {
    align-items: center !important;
    display: flex !important;
    flex: 1 1 auto;
    justify-content: space-between;
    min-height: 44px;
    width: 100% !important;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li > a :is(.item-content, .item-media, .item-inner, .title, .icon-arrow, i),
body.ff-app #sidebar nav ul.sub-menu > li > a :is(.title, .icon-arrow, i),
body.ff-app .app-aside > ul.sub-menu > li > a :is(.title, .icon-arrow, i) {
    pointer-events: none;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li::before,
body.ff-app #sidebar nav > ul.main-navigation-menu > li::after,
body.ff-app #sidebar nav ul.sub-menu > li::before,
body.ff-app #sidebar nav ul.sub-menu > li::after,
body.ff-app .app-aside > ul.sub-menu > li::before,
body.ff-app .app-aside > ul.sub-menu > li::after {
    pointer-events: none;
}

/* Side menu hover visibility.
   CSS-only so the fast menu open/hover behaviour stays responsive. */
body.ff-app {
    --ff-menu-hover-bg: color-mix(in srgb, transparent 96%, var(--primary-seed));
    --ff-menu-hover-ring: color-mix(in srgb, transparent 28%, var(--primary-seed));
    --ff-menu-hover-halo: color-mix(in srgb, transparent 80%, var(--primary-seed));
    --ff-menu-hover-text: var(--nav-text);
}

body.ff-app[data-theme="dark"] {
    --ff-menu-hover-bg: color-mix(in srgb, transparent 90%, var(--primary));
    --ff-menu-hover-ring: color-mix(in srgb, transparent 18%, var(--primary));
    --ff-menu-hover-halo: color-mix(in srgb, transparent 70%, var(--primary));
    --ff-menu-hover-text: var(--nav-text);
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li,
body.ff-app #sidebar nav ul.sub-menu > li,
body.ff-app .app-aside > ul.sub-menu > li,
body.ff-app #sidebar nav > ul.main-navigation-menu > li > a,
body.ff-app #sidebar nav ul.sub-menu > li > a,
body.ff-app .app-aside > ul.sub-menu > li > a {
    transition: none !important;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li.ff-main-menu-hover > a,
body.ff-app #sidebar nav > ul.main-navigation-menu > li.hover > a,
body.ff-app #sidebar nav > ul.main-navigation-menu > li:not(.active):not(.open):hover > a,
body.ff-app #sidebar nav > ul.main-navigation-menu > li:not(.active):not(.open) > a:hover,
body.ff-app #sidebar nav > ul.main-navigation-menu > li:not(.active):not(.open) > a:focus-visible,
body.ff-app #sidebar nav ul.sub-menu > li:not(.active):not(.active-state):not(.open):hover > a,
body.ff-app #sidebar nav ul.sub-menu > li:not(.active):not(.active-state):not(.open) > a:hover,
body.ff-app #sidebar nav ul.sub-menu > li:not(.active):not(.active-state):not(.open) > a:focus-visible,
body.ff-app .app-aside > ul.sub-menu > li:not(.active):not(.active-state):not(.open):hover > a,
body.ff-app .app-aside > ul.sub-menu > li:not(.active):not(.active-state):not(.open) > a:hover,
body.ff-app .app-aside > ul.sub-menu > li:not(.active):not(.active-state):not(.open) > a:focus-visible {
    background: var(--ff-menu-hover-bg) !important;
    background-color: var(--ff-menu-hover-bg) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: inset 0 0 0 2px var(--ff-menu-hover-ring), 0 0 0 3px var(--ff-menu-hover-halo) !important;
    color: var(--ff-menu-hover-text) !important;
    outline: none !important;
    transition: none !important;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li.ff-main-menu-hover > a :is(.item-inner, .title, .item-media i, .icon-arrow),
body.ff-app #sidebar nav > ul.main-navigation-menu > li.hover > a :is(.item-inner, .title, .item-media i, .icon-arrow),
body.ff-app #sidebar nav > ul.main-navigation-menu > li:not(.active):not(.open):hover > a :is(.item-inner, .title, .item-media i, .icon-arrow),
body.ff-app #sidebar nav ul.sub-menu > li:not(.active):not(.active-state):not(.open):hover > a :is(.title, i, .icon-arrow),
body.ff-app .app-aside > ul.sub-menu > li:not(.active):not(.active-state):not(.open):hover > a :is(.title, i, .icon-arrow) {
    color: var(--ff-menu-hover-text) !important;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li:not(.active):not(.active-state):not(.open):hover,
body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li:not(.active):not(.active-state):not(.open):hover > a,
body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li:not(.active):not(.active-state):not(.open) > a:hover,
body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li:not(.active):not(.active-state):not(.open):hover,
body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li:not(.active):not(.active-state):not(.open):hover > a,
body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li:not(.active):not(.active-state):not(.open) > a:hover,
body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li:not(.active):not(.active-state):not(.open):hover,
body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li:not(.active):not(.active-state):not(.open):hover > a,
body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li:not(.active):not(.active-state):not(.open) > a:hover {
    background: var(--ff-menu-hover-bg) !important;
    background-color: var(--ff-menu-hover-bg) !important;
    color: var(--ff-menu-hover-text) !important;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li:not(.active):not(.active-state):not(.open):hover > a,
body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li:not(.active):not(.active-state):not(.open):hover > a,
body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li:not(.active):not(.active-state):not(.open):hover > a {
    border-radius: var(--radius-sm) !important;
    box-shadow: inset 0 0 0 2px var(--ff-menu-hover-ring), 0 0 0 3px var(--ff-menu-hover-halo) !important;
}

/* Collapsed flyout rows are inside a scroll pane, so keep their row ring internal. */
body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li:hover > a,
body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li > a:hover,
body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li > a:focus-visible,
body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li.active > a,
body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li.active-state > a,
body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li.open > a,
body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li > a.active,
body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li:hover > a,
body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li > a:hover,
body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li > a:focus-visible,
body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li.active > a,
body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li.active-state > a,
body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li.open > a,
body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li > a.active {
    box-shadow: inset 0 0 0 2px var(--ff-menu-hover-ring), inset 0 0 0 5px var(--ff-menu-hover-halo) !important;
    outline: none !important;
}

/* Full-width work mode.
   This is separate from app-sidebar-closed because the closed state drives the mini-sidebar flyout behaviour. */
body.ff-app #app.app-sidebar-hidden #sidebar,
body.ff-app #app.app-sidebar-hidden .app-aside {
    display: none !important;
    min-width: 0 !important;
    width: 0 !important;
}

body.ff-app #app.app-sidebar-hidden .navbar .navbar-header {
    display: none !important;
    min-width: 0 !important;
    width: 0 !important;
}

body.ff-app #app.app-sidebar-hidden .navbar .navbar-collapse,
body.ff-app #app.app-sidebar-hidden .app-content,
body.ff-app #app.app-sidebar-hidden .main-content,
body.ff-app #app.app-sidebar-hidden > footer {
    margin-left: 0 !important;
}

body.ff-app #app.app-sidebar-hidden .navbar .navbar-collapse {
    left: 0 !important;
}

html body.ff-app #app.app-sidebar-hidden #historyTabs {
    left: 12px !important;
}

body.ff-app .ff-topnav-bg .nav.navbar-right > li.ff-topnav-sidebar-focus {
    align-items: center !important;
    align-self: center !important;
    display: inline-flex !important;
    float: none !important;
    height: var(--ff-topbar-height) !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 2px !important;
    position: relative !important;
    top: 0 !important;
}

body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.ff-topnav-sidebar-focus > a {
    align-items: center !important;
    display: inline-flex !important;
    height: 32px !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    width: 32px !important;
}

body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.ff-topnav-sidebar-focus > a > span.title {
    align-items: center !important;
    display: inline-flex !important;
    height: 32px !important;
    justify-content: center !important;
    line-height: 1 !important;
    width: 32px !important;
}

body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.ff-topnav-sidebar-focus > a i {
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
    transform: translateY(1px) !important;
}

/* Final compact chrome lock: keep header actions and dashboard shortcuts compact after route changes. */
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header {
    margin-bottom: 6px !important;
    padding: 5px 10px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-page-header-row {
    align-items: center !important;
    gap: 8px !important;
    min-height: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-page-title-wrap {
    min-width: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-page-title {
    font-size: 18px !important;
    line-height: 1.05 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-fav-btn,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-icon-btn {
    height: 28px !important;
    min-height: 28px !important;
    min-width: 28px !important;
    width: 28px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar {
    gap: 5px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar :is(.ff-action, .btn-group > .dropdown-toggle, button.dropdown-toggle, a.dropdown-toggle) {
    align-items: center !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    height: 36px !important;
    justify-content: center !important;
    max-width: 78px !important;
    min-height: 36px !important;
    min-width: 68px !important;
    overflow: hidden !important;
    padding: 3px 5px !important;
    width: 68px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar :is(.ff-action, .btn-group > .dropdown-toggle, button.dropdown-toggle, a.dropdown-toggle) :is(i, .fa, .text30) {
    font-size: 13px !important;
    line-height: 1 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar .sparkline,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar .values {
    align-items: center !important;
    display: inline-flex !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar .caret {
    margin-left: 2px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar :is(.ff-action-label, .values p) {
    color: currentColor !important;
    display: block !important;
    font-size: 9px !important;
    font-weight: 750 !important;
    letter-spacing: .025em !important;
    line-height: 1 !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

/* Final normal chrome lock: trim wasted space around page header toolbar buttons. */
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) #page-title.ff-page-header {
    margin-bottom: 8px !important;
    padding: 6px 10px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) #page-title.ff-page-header .ff-page-header-row {
    align-items: center !important;
    gap: 8px 12px !important;
    min-height: 0 !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar {
    gap: 6px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar :is(.ff-action, .btn-group > .dropdown-toggle, button.dropdown-toggle, a.dropdown-toggle) {
    gap: 4px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 4px 9px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar :is(.ff-action, .btn-group > .dropdown-toggle, button.dropdown-toggle, a.dropdown-toggle) :is(i, .fa, .text30) {
    font-size: 15px !important;
    line-height: 1 !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar :is(.ff-action-label, .values p) {
    line-height: 1.05 !important;
    margin: 0 !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-page:not(.ff-dashboard) .ff-dash-menu {
    margin: 0 0 8px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-page:not(.ff-dashboard) .ff-dash-tiles {
    align-items: stretch !important;
    background: transparent !important;
    border: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-page:not(.ff-dashboard) .ff-dash-tiles::before,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-page:not(.ff-dashboard) .ff-dash-tiles::after {
    content: none !important;
    display: none !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-page:not(.ff-dashboard) .ff-dash-button {
    float: none !important;
    flex: 0 1 calc((100% - 30px) / 6) !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 160px !important;
    padding: 0 !important;
    width: auto !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-page:not(.ff-dashboard) .ff-dash-button > a {
    display: block !important;
    height: 100% !important;
    padding: 0 !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-page:not(.ff-dashboard) .ff-dash-button .dashboard-panel {
    align-items: center !important;
    border-radius: 6px !important;
    display: flex !important;
    height: 44px !important;
    justify-content: center !important;
    margin: 0 !important;
    min-height: 44px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-page:not(.ff-dashboard) .ff-dash-button .panel-body {
    align-items: center !important;
    display: flex !important;
    height: 44px !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    width: 100% !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-page:not(.ff-dashboard) .ff-dash-button .ff-tile-title,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-page:not(.ff-dashboard) .ff-dash-button .StepTitle {
    font-size: 15px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    width: 100% !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page .ff-dash-menu {
    margin: 0 0 4px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page .ff-dash-tiles {
    align-items: stretch !important;
    background: transparent !important;
    border: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page .ff-dash-button {
    float: none !important;
    flex: 0 1 164px !important;
    max-width: 190px !important;
    min-height: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page .ff-dash-button > a {
    display: block !important;
    height: 100% !important;
    padding: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page .ff-dash-button .dashboard-panel {
    align-items: center !important;
    border-radius: 6px !important;
    display: flex !important;
    height: 30px !important;
    justify-content: center !important;
    margin: 0 !important;
    min-height: 30px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page .ff-dash-button .panel-body {
    align-items: center !important;
    display: flex !important;
    height: 30px !important;
    justify-content: center !important;
    min-height: 30px !important;
    padding: 0 8px !important;
    width: 100% !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page .ff-dash-button .ff-tile-title,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page .ff-dash-button .StepTitle {
    font-size: 13px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    width: 100% !important;
}

/* Normal-mode filter alignment: keep ui-select/list fields level with text inputs. */
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-waybill-filter-grid,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-flow-row,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-inline-row {
    align-items: flex-start !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field .form-group,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field .dx-field {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    margin-bottom: 0 !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field > label,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field .form-group > label,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field .dx-field > label {
    align-items: center !important;
    display: flex !important;
    gap: 4px !important;
    height: 18px !important;
    line-height: 18px !important;
    margin: 0 0 2px !important;
    min-height: 18px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field label .pull-right,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field label [json-dbl] {
    align-self: center !important;
    float: none !important;
    line-height: 16px !important;
    margin-left: auto !important;
    margin-top: 0 !important;
    max-height: 18px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field > .form-control,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field > .ff-control,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field > .ui-select-container,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field .form-group > .form-control,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field .form-group > .ff-control,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field .form-group > .ui-select-container,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field .dx-field > .ff-control,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field .dx-field > .ui-select-container,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field .ff-dx {
    margin-top: 0 !important;
    width: 100% !important;
}

/* Generate Manifest final header/filter alignment.
   Keep these page-scoped so the accepted grid density and other pages stay untouched. */
body.ff-app .ff-generate-manifest {
    --ff-manifest-reference-field-w: 16.66666667%;
}

body.ff-app .ff-generate-manifest .ff-manifest-final-row,
body.ff-app .ff-generate-manifest .ff-manifest-lookup-row {
    gap: 2px 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-final-row > [class*="col-"],
body.ff-app .ff-generate-manifest .ff-manifest-lookup-row > [class*="col-"] {
    box-sizing: border-box !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-final-row > .ff-manifest-schedule-field,
body.ff-app .ff-generate-manifest .ff-manifest-final-row > .ff-manifest-seal-field,
body.ff-app .ff-generate-manifest .ff-manifest-final-row > .ff-manifest-comment-field,
body.ff-app .ff-generate-manifest .ff-manifest-final-row > .ff-manifest-note-field,
body.ff-app .ff-generate-manifest .ff-manifest-lookup-row > .ff-manifest-lookup-field {
    flex: 0 1 var(--ff-manifest-reference-field-w) !important;
    max-width: var(--ff-manifest-reference-field-w) !important;
    min-width: 165px !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-final-row > .ff-manifest-status-option {
    align-self: flex-start !important;
    padding-top: 15px !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-final-row > .ff-manifest-status-option .checkbox,
body.ff-app .ff-generate-manifest .ff-manifest-final-row > .ff-manifest-status-option .checkbox-inline {
    align-items: center !important;
    display: inline-flex !important;
    height: var(--ff-control-h) !important;
    line-height: var(--ff-control-h) !important;
    margin: 0 !important;
    min-height: var(--ff-control-h) !important;
    padding-top: 0 !important;
    white-space: nowrap !important;
}

body.ff-app .ff-generate-manifest .ff-filter-driver,
body.ff-app .ff-generate-manifest .ff-filter-vehicle {
    flex: 1 1 240px !important;
}

body.ff-app .ff-generate-manifest .ff-filter-field .form-group > label.width100,
body.ff-app .ff-generate-manifest .ff-filter-field .form-group > label:has([json-dbl]),
body.ff-app .ff-generate-manifest .ff-filter-field > label.width100,
body.ff-app .ff-generate-manifest .ff-filter-field > label:has([json-dbl]) {
    align-items: center !important;
    display: flex !important;
    gap: 4px !important;
    height: 16px !important;
    line-height: 16px !important;
    margin: 0 0 1px !important;
    max-height: 16px !important;
    min-height: 16px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

body.ff-app .ff-generate-manifest .ff-filter-field label .pull-right,
body.ff-app .ff-generate-manifest .ff-filter-field label [json-dbl] {
    align-items: center !important;
    align-self: center !important;
    display: inline-flex !important;
    float: none !important;
    font-size: 9px !important;
    height: 12px !important;
    justify-content: center !important;
    line-height: 10px !important;
    margin-left: auto !important;
    margin-top: 0 !important;
    max-height: 12px !important;
    min-height: 12px !important;
    overflow: hidden !important;
    padding: 0 4px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Login responsive logo guard.
   Keep the banner inside its header when short windows collapse the login card. */
#login-box.ff-login .login-header {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
}

#login-box.ff-login .login-banner {
    box-sizing: border-box !important;
    height: calc(100% - 16px) !important;
    inset: 8px 14px !important;
    max-height: none !important;
    max-width: none !important;
    object-fit: contain !important;
    position: absolute !important;
    width: 100% !important;
    width: calc(100% - 28px) !important;
}

@media (max-height: 650px), (max-width: 480px) {
    #login-box.ff-login {
        align-content: start !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    #login-box.ff-login #login-container.login-container {
        max-height: none !important;
        overflow: visible !important;
    }

    #login-box.ff-login .login-header {
        height: clamp(104px, 27vh, 150px) !important;
        margin-bottom: 12px !important;
        min-height: 104px !important;
        padding: 8px 14px !important;
    }
}

/* Debriefing POD controls: keep bulk debrief fields aligned and compact. */
body.ff-app .ff-debriefing .ff-bulk-debrief-row {
    align-items: flex-end !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    margin: 0 !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-row::before,
body.ff-app .ff-debriefing .ff-bulk-debrief-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-row > [class*="col-"] {
    float: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-row .form-group,
body.ff-app .ff-debriefing .ff-bulk-debrief-row .dx-field {
    margin: 0 !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-row label {
    display: block !important;
    line-height: 18px !important;
    margin-bottom: 2px !important;
    min-height: 18px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-row :is(.form-control, .ff-control, .ui-select-container, .input-icon, .dx-datebox, .dx-texteditor, .dx-texteditor-container) {
    box-sizing: border-box !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    width: 100% !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-date {
    flex: 0 0 162px !important;
    min-width: 162px !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-time {
    flex: 0 0 120px !important;
    min-width: 120px !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-person {
    flex: 0 0 138px !important;
    min-width: 138px !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-note {
    flex: 1 1 390px !important;
    max-width: 520px !important;
    min-width: 260px !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-type {
    flex: 0 1 230px !important;
    min-width: 210px !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-actions {
    align-items: flex-end !important;
    display: inline-flex !important;
    flex: 0 0 246px !important;
    gap: 8px !important;
    min-width: 246px !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-actions .btn {
    align-items: center !important;
    display: inline-flex !important;
    height: var(--ff-control-h) !important;
    justify-content: center !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-btn {
    min-width: 138px !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-clear {
    gap: 5px !important;
    min-width: 92px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-row > .ff-pod-action {
    align-items: flex-end !important;
    display: inline-flex !important;
    flex: 0 0 178px !important;
    gap: 6px !important;
    min-width: 178px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-action .btn,
body.ff-app .ff-waybill.ff-full-capture .ff-pod-action > .btn {
    align-items: center !important;
    display: inline-flex !important;
    justify-content: center !important;
    margin-top: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-clear-action {
    gap: 5px !important;
    min-width: 72px !important;
}

/* Compact filter date ranges: keep both calendar icons optically centered. */
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact, [data-grid-font-size="small"]) .ff-page:not(.ff-login) .input-group.range-picker .input-icon {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    position: relative !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact, [data-grid-font-size="small"]) .ff-page:not(.ff-login) .input-group.range-picker .input-icon > i.ti-calendar,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact, [data-grid-font-size="small"]) .ff-page:not(.ff-login) .input-group.range-picker .input-icon > input.form-control:focus + i.ti-calendar,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact, [data-grid-font-size="small"]) .ff-page:not(.ff-login) .input-group.range-picker .input-icon > input.form-control:focus ~ i.ti-calendar {
    align-items: center !important;
    display: inline-flex !important;
    height: var(--ff-control-h) !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
}

/* Final selected-list placeholder guard.
   When a list/dropdown already has a value, keep the placeholder out of view
   so controls do not show "Select..." or "Search..." next to the chosen text. */
body.ff-app .ff-page:not(.ff-login) .ui-select-container.ng-not-empty .ui-select-placeholder,
body.ff-app .ff-page:not(.ff-login) .ui-select-bootstrap.ng-not-empty .ui-select-placeholder,
body.ff-app .ff-page:not(.ff-login) .ui-select-container:has(.ui-select-match-text:not(.ng-hide):not([aria-hidden="true"])) .ui-select-placeholder,
body.ff-app .ff-page:not(.ff-login) .ui-select-bootstrap:has(.ui-select-match-text:not(.ng-hide):not([aria-hidden="true"])) .ui-select-placeholder,
body.ff-app .ff-page:not(.ff-login) .dx-selectbox:not(.dx-texteditor-empty) .dx-placeholder,
body.ff-app .ff-page:not(.ff-login) .dx-dropdowneditor:not(.dx-texteditor-empty) .dx-placeholder,
body.ff-app .ff-page:not(.ff-login) .dx-texteditor:not(.dx-texteditor-empty) .dx-placeholder {
    display: none !important;
    flex: 0 0 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
}

/* Full capture freight calculation: preserve CHAR(13)/line breaks and spacing in rating output. */
.freight-calc {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

/* Full capture notes: keep the title visible and move add action out of the grid toolbar row. */
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-notes-section {
    padding-top: 6px !important;
    position: relative;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-notes-section > legend {
    line-height: 16px !important;
    margin-bottom: 2px !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-notes-section > .margin-bottom-10 {
    margin-bottom: 4px !important;
    margin-top: -2px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-notes-add-btn {
    align-items: center !important;
    border: 1px solid rgba(255, 255, 255, .95) !important;
    border-radius: 6px !important;
    box-shadow: 0 0 0 1px rgba(27, 74, 140, .35) !important;
    display: inline-flex !important;
    height: 28px !important;
    justify-content: center !important;
    min-height: 28px !important;
    min-width: 34px !important;
    padding: 0 !important;
    position: absolute !important;
    right: 14px !important;
    top: 6px !important;
    width: 34px !important;
    z-index: 3;
}

body.ff-app .ff-waybill.ff-full-capture .ff-notes-add-btn i,
body.ff-app .ff-waybill.ff-full-capture .ff-notes-add-btn .fa {
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-notes-grid .dx-datagrid-header-panel {
    display: none !important;
}

/* Toolbar lock: fixed page action header without changing grid sizing. */
body.ff-app.ff-toolbar-locked #page-title.ff-page-header {
    box-sizing: border-box !important;
    left: var(--ff-toolbar-lock-left, 0px) !important;
    margin: 0 !important;
    max-width: none !important;
    position: fixed !important;
    right: auto !important;
    top: var(--ff-toolbar-lock-top, 44px) !important;
    width: var(--ff-toolbar-lock-width, 100vw) !important;
    z-index: 2600 !important;
}

body.ff-app .ff-toolbar-lock-spacer {
    display: block !important;
    height: var(--ff-toolbar-lock-height, 0px) !important;
    min-height: var(--ff-toolbar-lock-height, 0px) !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

body.ff-app:not(.ff-toolbar-locked) .ff-toolbar-lock-spacer {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
}

body.ff-app #page-title.ff-page-header .ff-toolbar .ff-toolbar-lock-toggle {
    align-items: center !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex: 0 0 36px !important;
    height: 36px !important;
    justify-content: center !important;
    max-width: 36px !important;
    min-height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    width: 36px !important;
}

body.ff-app #page-title.ff-page-header .ff-toolbar .ff-toolbar-lock-toggle i,
body.ff-app #page-title.ff-page-header .ff-toolbar .ff-toolbar-lock-toggle .fa {
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

body.ff-app.ff-toolbar-locked #page-title.ff-page-header .ff-toolbar .ff-toolbar-lock-toggle,
body.ff-app #page-title.ff-page-header .ff-toolbar .ff-toolbar-lock-toggle.ff-toolbar-lock-toggle--locked {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary, #fff) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar .ff-toolbar-lock-toggle {
    flex-basis: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    min-height: 30px !important;
    min-width: 30px !important;
    width: 30px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar .ff-toolbar-lock-toggle i,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar .ff-toolbar-lock-toggle .fa {
    font-size: 13px !important;
}

/* Keep the support screenshot button centred with the compact sidebar icon rail. */
@media (min-width: 768px) {
    body.ff-app .ff-shell .ff-topnav .navbar-header {
        align-items: center !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex: 0 0 70px !important;
        justify-content: center !important;
        max-width: 70px !important;
        min-width: 70px !important;
        padding: 0 !important;
        width: 70px !important;
    }

    body.ff-app .ff-shell .ff-topnav .navbar-header a.ff-support-screenshot-btn {
        float: none !important;
        left: 5px !important;
        margin: 0 !important;
        position: relative !important;
        right: auto !important;
        transform: none !important;
    }
}