/* =========================================================
   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: #2a2f3a;
        --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 ::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;
    }

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

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

/* --- Footer island --- */
body.ff-app .ff-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    padding: 10px 16px;
}

    body.ff-app .ff-footer .text-bold {
        color: var(--text) !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;
    }

/* 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: prevent cramped overlap on smaller widths */
body.ff-app .ff-collection .range-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

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

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

/* 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 .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;
    }

/* 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 {
}

    /* =========================================================
   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;
    }

        /* 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;
        overflow: hidden;
    }

        /* 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;
    }

    /* 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;
            gap: 8px !important;
            margin: 0 !important;
            padding: 6px 10px !important;
            border-radius: var(--radius-sm) !important;
            cursor: pointer !important;
            user-select: none !important;
            color: var(--text) !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;
            }

            /* 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;
                transform: rotate(-45deg) !important;
                position: relative !important;
                left: -22px !important; /* sits inside the box */
                top: 1px !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;
        }

    /* 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;
}

/* 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: space-between;
    padding: 0 12px;
    box-shadow: none;
    background: var(--ff-surface);
    color: var(--ff-text);
}

/* 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;
    }

/* 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 fixed submenu */
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;
}


.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%;
    margin: 0 0 14px 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;
    overflow: hidden; /* clips corners in most browsers */
}

    /* 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: 10px 8px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    border-right: 1px solid var(--divider) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    vertical-align: middle !important;
}

/* 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: 8px 8px !important;
    color: var(--text) !important;
    border: 0 !important;
    border-right: 1px solid var(--divider) !important;
    border-bottom: 1px solid var(--divider) !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: 30px !important;
    padding: 6px 8px !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;
    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: 30px !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;
}

    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: 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.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: 10px 8px !important;
    background: var(--surface-3) !important;
    color: var(--text) !important;
    border: 0 !important;
    border-top: 1px solid var(--divider) !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: 160px;
}

body.ff-app .ff-waybill .ff-col-desc {
    min-width: 250px;
}

body.ff-app .ff-waybill .ff-col-actions {
    width: 64px;
    min-width: 64px;
}

/* Add button (plus) – token based */
body.ff-app .ff-waybill #addNewParcel.ff-parcel-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    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;
    color: color-mix(in srgb, var(--text-muted) 85%, var(--primary)) !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;
        }

            /* --- 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;
            }*/


/* --- 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,
    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;
    }

@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: 10px 10px 10px 10px !important;
}

.ff-dash-button .panel-body {
    padding: 20px 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);
    }

.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;
}

/* 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 :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%;
}

    body.ff-app .input-group.range-picker .start-date,
    body.ff-app .input-group.range-picker .end-date {
        flex: 1 1 0;
        min-width: 0; /* prevents overflow pushing layout */
    }

        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;
        padding-left: 30px !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 10px !important; /* tweak if you want narrower/wider */
    }

    /* 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;
        padding: 0 10px !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:30px;
    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: 12px 16px;
}

/* --- 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;
            }



/* Prevent tooltip from stealing hover and causing flicker */
.tooltip.ff-tooltip-noevents {
    pointer-events: none;
}

/* 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 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;
}