/* ============================================================
   TRUE TIME EXPRESS - Brand stylesheet
   Loaded AFTER style.css so it wins. New layout model:
   full-width topbar on top + fixed sidebar below it on the left.
   Selectors mirror the template's `[data-color=primary]` pattern
   where needed to beat its !important rules without editing it.
   ============================================================ */

:root {
    --brand-primary: #EF2B32;
    --brand-primary-rgb: 239, 43, 50;
    --brand-secondary: #991B1B;
    --brand-secondary-rgb: 153, 27, 27;
    --brand-dark: #171717;
    --brand-surface: #FFFFFF;
    --brand-bg: #F8FAFC;
    --brand-text: #1F2937;
    --brand-muted: #6B7280;
    --brand-border: #E5E7EB;
    --brand-success: #10B981;
    --brand-danger: #DC2626;
    --brand-gradient: linear-gradient(135deg, #171717 0%, #991B1B 52%, #EF2B32 100%);
    --brand-radius: 14px;
    --brand-radius-sm: 10px;
    --brand-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
    --brand-shadow-hover: 0 12px 30px rgba(15, 23, 42, 0.12);
    --as-header-h: 64px;
    --as-sidebar-w: 260px;
    --as-sidebar-mini-w: 78px;
}

html { --primary-rgb: 239, 43, 50 !important; }

/* ============================================================
   1. CORE LAYOUT - full-width topbar + sidebar below it
   ============================================================ */

/* Topbar: spans the full width, fixed to the very top */
.header,
[data-topbar=white] .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--as-header-h) !important;
    background: #fff !important;
    border-bottom: 1px solid var(--brand-border) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    z-index: 1040 !important;
    margin: 0 !important;
}

.header .main-header {
    height: var(--as-header-h);
    display: flex;
    align-items: center;
    padding: 0 18px 0 0;
    margin: 0;
    width: 100%;
}

/* Sidebar: sits below the topbar, fixed to the left */
.sidebar {
    position: fixed !important;
    top: var(--as-header-h) !important;
    left: 0 !important;
    bottom: 0 !important;
    width: var(--as-sidebar-w) !important;
    height: calc(100vh - var(--as-header-h)) !important;
    background: #fff !important;
    border-right: 1px solid var(--brand-border) !important;
    margin: 0 !important;
    z-index: 1035 !important;
    transition: width .2s ease, transform .2s ease;
}

.page-wrapper {
    margin-left: var(--as-sidebar-w) !important;
    padding-top: var(--as-header-h) !important;
    transition: margin-left .2s ease;
    min-height: 100vh;
}

/* Brand zone in the topbar - aligns over the sidebar column */
.header .header-left {
    width: var(--as-sidebar-w);
    height: var(--as-header-h);
    display: flex !important;
    align-items: center;
    padding: 0 14px;
    margin: 0;
    border-right: 1px solid var(--brand-border);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    transition: width .2s ease;
}

/* Desktop collapse (mini) sidebar */
@media (min-width: 992px) {
    body.mini-sidebar .sidebar { width: var(--as-sidebar-mini-w) !important; }
    body.mini-sidebar .page-wrapper { margin-left: var(--as-sidebar-mini-w) !important; }
    /* collapsed rail: shrink the logo to fit the narrow column */
    body.mini-sidebar .header .header-left { width: var(--as-sidebar-mini-w); padding: 0 8px; }
    body.mini-sidebar .header .header-left .as-topbar-logo img { height: auto; padding: 5px 8px; border-radius: 10px; }

    /* hover-to-expand while collapsed */
    body.mini-sidebar.expand-menu .sidebar {
        width: var(--as-sidebar-w) !important;
        box-shadow: var(--brand-shadow-hover);
    }
}

/* Mobile: sidebar becomes an off-canvas drawer */
@media (max-width: 991.98px) {
    .header .header-left { width: auto; border-right: none; padding: 0 12px; }
    .sidebar { transform: translateX(-100%); width: var(--as-sidebar-w) !important; }
    .main-wrapper.slide-nav .sidebar { transform: translateX(0); box-shadow: var(--brand-shadow-hover); }
    .page-wrapper { margin-left: 0 !important; }
}

/* Mobile overlay behind the open drawer */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: var(--as-header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 22, 40, 0.45);
    z-index: 1034;
}
.sidebar-overlay.opened { display: block; }
@media (min-width: 992px) {
    .sidebar-overlay, .sidebar-overlay.opened { display: none !important; }
}

/* Hide the template's injected theme-customizer gear if it ever loads */
.sidebar-contact, .toggle-theme, .sidebar-themesettings { display: none !important; }

/* ============================================================
   2. GLOBAL CHROME
   ============================================================ */
body,
.main-wrapper,
.page-wrapper,
.content {
    background-color: var(--brand-bg) !important;
    color: var(--brand-text);
}

a { color: var(--brand-primary); }
a:hover { color: var(--brand-secondary); }

::selection { background: rgba(var(--brand-primary-rgb), 0.18); }

/* ============================================================
   3. BUTTONS - beat [data-color=primary] rules
   ============================================================ */
[data-color=primary] .btn.btn-primary,
[data-color=primary] .page-header .btn-added,
.btn.btn-primary,
.btn-primary {
    background-color: var(--brand-primary) !important;
    border: 1px solid var(--brand-primary) !important;
    color: #fff !important;
    border-radius: var(--brand-radius-sm) !important;
    box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb), 0.18);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    [data-color=primary] .btn.btn-primary:hover,
    [data-color=primary] .btn.btn-primary:focus,
    [data-color=primary] .btn.btn-primary:active,
    .btn.btn-primary:hover,
    .btn-primary:hover,
    .btn-primary:focus {
        background-color: #D8212A !important;
        border-color: #D8212A !important;
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(var(--brand-primary-rgb), 0.28);
    }

[data-color=primary] .link-primary,
[data-color=primary] .text-primary,
.link-primary,
.text-primary { color: var(--brand-primary) !important; }

[data-color=primary] .badge.badge-primary,
.badge.badge-primary,
.bg-primary { background: var(--brand-primary) !important; }

.bg-secondary { background: var(--brand-secondary) !important; }

.btn-secondary,
.btn.btn-secondary {
    background: transparent !important;
    border: 1px solid var(--brand-primary) !important;
    color: var(--brand-primary) !important;
    border-radius: var(--brand-radius-sm) !important;
}

    .btn-secondary:hover,
    .btn.btn-secondary:hover {
        background: var(--brand-primary) !important;
        color: #fff !important;
    }

.btn-success {
    background: var(--brand-success) !important;
    border-color: var(--brand-success) !important;
}

.btn-danger {
    background: var(--brand-danger) !important;
    border-color: var(--brand-danger) !important;
}

/* Orange CTA */
.btn.btn-as-cta,
.btn-as-cta,
a.btn.btn-as-cta {
    background: var(--brand-secondary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--brand-radius-sm) !important;
    height: 40px;
    padding: 0 18px !important;
    font-weight: 600;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(var(--brand-secondary-rgb), 0.32);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
    white-space: nowrap;
}

    .btn-as-cta:hover {
        background: #7F1D1D !important;
        color: #fff !important;
        transform: translateY(-1px);
        box-shadow: 0 8px 22px rgba(var(--brand-secondary-rgb), 0.42);
    }

/* ============================================================
   4. TOPBAR CONTENTS
   ============================================================ */

/* Brand logo + wordmark */
.header .header-left .as-topbar-logo {
    display: flex !important;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    line-height: 0;
    min-width: 0;
    opacity: 1 !important;
    visibility: visible !important;
}
    .header .header-left .as-topbar-logo img {
        height: 46px;
        width: auto;
        max-width: 100%;
        object-fit: contain;
        display: block;
        padding: 6px 16px;
        border-radius: 14px;
        background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.08), rgba(var(--brand-secondary-rgb), 0.06));
        border: 1px solid var(--brand-border);
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
        transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .header .header-left .as-topbar-logo:hover img {
        transform: translateY(-1px);
        box-shadow: var(--brand-shadow-hover);
        border-color: rgba(var(--brand-primary-rgb), 0.30);
    }

a.as-wordmark,
.as-wordmark {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
    text-decoration: none !important;
    color: var(--brand-text);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

    .as-wordmark .as-wordmark-top {
        font-size: 14px;
        font-weight: 800;
        background: var(--brand-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        letter-spacing: 0.3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .as-wordmark .as-wordmark-bottom {
        font-size: 8px;
        letter-spacing: 0.7px;
        font-weight: 700;
        color: var(--brand-muted);
        text-transform: uppercase;
        margin-top: 3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

/* Collapse toggle - now lives in the topbar, just right of the brand divider */
.header #toggle_btn.as-collapse-btn,
.header a#toggle_btn.as-collapse-btn {
    position: static !important;
    transform: none !important;
    top: auto !important;
    right: auto !important;
    margin: 0 0 0 16px !important;
    flex-shrink: 0;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: var(--brand-muted) !important;
    background: var(--brand-bg) !important;
    border: 1px solid var(--brand-border) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transition: all .15s ease;
}
    .header #toggle_btn.as-collapse-btn:hover {
        background: rgba(var(--brand-primary-rgb), 0.10) !important;
        color: var(--brand-primary) !important;
        border-color: rgba(var(--brand-primary-rgb), 0.25) !important;
    }
    .header #toggle_btn.as-collapse-btn i { font-size: 18px; transition: transform .2s ease; line-height: 1; }
    body.mini-sidebar .header #toggle_btn.as-collapse-btn i { transform: rotate(180deg); }

@media (max-width: 1199.98px) { .as-wordmark { display: none !important; } }
@media (min-width: 992px) { body.mini-sidebar .as-wordmark { display: none !important; } }
@media (max-width: 991.98px) {
    /* mobile uses the hamburger drawer - hide the brand logo column and collapse toggle */
    .header .header-left { display: none !important; }
    .header #toggle_btn.as-collapse-btn,
    .as-collapse-btn { display: none !important; }
}

/* Mobile hamburger */
.mobile_btn { display: none; }
@media (max-width: 991.98px) {
    .mobile_btn { display: inline-flex !important; align-items: center; padding: 0 6px; }
    .mobile_btn .bar-icon { display: inline-block; width: 22px; }
    .mobile_btn .bar-icon span { display: block; height: 2px; border-radius: 2px; background: var(--brand-primary); margin: 4px 0; }
}

/* Topbar menu container */
.header .user-menu {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 0 0 18px;
    margin: 0;
    list-style: none;
    height: var(--as-header-h);
}
    .header .user-menu > li { display: flex; align-items: center; }

/* Search */
.header .nav-searchinputs { flex: 0 1 420px; margin-right: auto; }
.header .top-nav-search { width: 100%; }
.header .top-nav-search form { width: 100%; }
.header .searchinputs {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background: var(--brand-bg);
    border: 1px solid var(--brand-border);
    border-radius: 999px;
    height: 42px;
    padding: 0 12px;
}
    .header .searchinputs .as-search-icon { color: var(--brand-muted); font-size: 17px; display: inline-flex; }
    .header .searchinputs input {
        flex: 1 1 auto;
        border: none;
        background: transparent;
        outline: none;
        font-size: 14px;
        color: var(--brand-text);
        padding: 0 10px;
    }
    .header .searchinputs input::placeholder { color: #94a3b8; }
    .header .searchinputs .as-search-kbd {
        font-size: 11px;
        font-weight: 600;
        color: var(--brand-muted);
        background: #fff;
        border: 1px solid var(--brand-border);
        border-radius: 6px;
        padding: 2px 7px;
        white-space: nowrap;
    }
.header .responsive-search { display: none; }
.header .searchinputs.dropdown-toggle::after { display: none !important; }

/* Ghost button (Quick Links) */
.as-ghost-btn {
    height: 40px;
    padding: 0 16px;
    border-radius: var(--brand-radius-sm);
    border: 1px solid var(--brand-border);
    background: #fff;
    color: var(--brand-text) !important;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
    transition: all .15s ease;
}
    .as-ghost-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary) !important; background: rgba(var(--brand-primary-rgb), 0.05); }

/* Quick links mega dropdown */
.dropdown-xl { min-width: 460px; padding: 14px; border: 1px solid var(--brand-border); border-radius: var(--brand-radius); box-shadow: var(--brand-shadow-hover); }
.link-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px; border-radius: var(--brand-radius-sm);
    border: 1px solid var(--brand-border); color: var(--brand-text);
    text-decoration: none; height: 100%; transition: all .15s ease;
}
    .link-item:hover { border-color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), 0.05); color: var(--brand-primary); }
    .link-item .link-icon { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--brand-secondary-rgb), 0.12); color: var(--brand-secondary); flex-shrink: 0; }
    .link-item p { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.25; }

/* Track shipment CTA spacing */
.user-menu .as-track-cta { height: 40px; padding: 0 16px !important; color: #fff !important; }

/* Divider */
.as-topbar-divider { width: 1px; height: 26px; background: var(--brand-border); margin: 0 4px; }

/* Generic round icon buttons (bell, lang, fullscreen) */
.as-icon-btn {
    height: 40px;
    min-width: 40px;
    padding: 0 10px;
    border-radius: var(--brand-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-text) !important;
    background: transparent;
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
    transition: all .15s ease;
}
    .as-icon-btn:hover { background: var(--brand-bg); color: var(--brand-primary) !important; }
    .as-icon-btn i { font-size: 19px; }

/* Notification bell red dot */
.as-bell { position: relative; }
    .as-bell::after {
        content: "";
        position: absolute;
        top: 7px;
        right: 9px;
        width: 8px;
        height: 8px;
        background: var(--brand-secondary);
        border-radius: 50%;
        box-shadow: 0 0 0 2px #fff;
    }

/* Profile */
.profile-nav .userset { gap: 10px; padding: 4px 6px; border-radius: var(--brand-radius-sm); transition: background .15s ease; }
    .profile-nav .userset:hover { background: var(--brand-bg); }
    .profile-nav .user-letter img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--brand-border); }
.as-user-meta { flex-direction: column; line-height: 1.1; align-items: flex-start; }
    .as-user-name { font-size: 13.5px; font-weight: 700; color: var(--brand-text); }
    .as-user-role { font-size: 11px; color: var(--brand-muted); }
.as-user-caret { color: var(--brand-muted); font-size: 14px; }

.menu-drop-user { min-width: 240px; border: 1px solid var(--brand-border); border-radius: var(--brand-radius); box-shadow: var(--brand-shadow-hover); padding: 8px; }
    .menu-drop-user .profileset { padding: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--brand-border); }
    .menu-drop-user .user-img img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
    .menu-drop-user .dropdown-item { border-radius: 8px; padding: 9px 10px; font-weight: 500; }
    .menu-drop-user .dropdown-item:hover { background: rgba(var(--brand-primary-rgb), 0.07); color: var(--brand-primary); }
    .menu-drop-user .logout:hover { background: rgba(var(--brand-danger), 0.08); color: var(--brand-danger); }

.mobile-user-menu { display: none !important; }
@media (max-width: 991.98px) {
    .header .nav-searchinputs { display: none; }
    .header .link-nav { display: none; }
}

/* ============================================================
   5. SIDEBAR
   ============================================================ */
.sidebar-inner { height: calc(100vh - var(--as-header-h)); overflow-y: auto; overflow-x: hidden; }

.sidebar .sidebar-menu { padding: 14px 0 24px; }
.sidebar .sidebar-menu > ul { list-style: none; margin: 0; padding: 0; }

/* Section labels */
.sidebar .menu-title {
    padding: 14px 22px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #94a3b8;
}
    .sidebar .menu-title span { display: inline; }

.sidebar .sidebar-menu > ul > li { position: relative; }

.sidebar .sidebar-menu > ul > li > a,
.sidebar .sidebar-menu > ul li.submenu > a,
.sidebar .sidebar-menu > ul li ul li a {
    display: flex;
    align-items: center;
    color: var(--brand-text);
    font-weight: 500;
    font-size: 14px;
    border-radius: var(--brand-radius-sm);
    margin: 2px 12px;
    padding: 10px 12px;
    transition: background-color .15s ease, color .15s ease;
    position: relative;
}

.sidebar .sidebar-menu > ul > li > a > i,
.sidebar .sidebar-menu > ul li.submenu > a > i {
    font-size: 18px;
    width: 22px;
    margin-right: 12px;
    text-align: center;
    flex-shrink: 0;
}

.sidebar .sidebar-menu .menu-arrow { margin-left: auto; }

.sidebar .sidebar-menu > ul > li > a:hover,
.sidebar .sidebar-menu > ul li.submenu > a:hover {
    background: rgba(var(--brand-primary-rgb), 0.06);
    color: var(--brand-primary);
}

/* Submenu (child) items */
.sidebar .sidebar-menu > ul li ul {
    list-style: none;
    padding: 2px 0 4px;
    margin: 0;
}
.sidebar .sidebar-menu > ul li ul li a {
    font-size: 13px;
    padding: 8px 12px 8px 46px;
    margin: 1px 12px;
    color: var(--brand-muted);
}
    .sidebar .sidebar-menu > ul li ul li a::before {
        content: "";
        position: absolute;
        left: 26px;
        top: 50%;
        transform: translateY(-50%);
        width: 6px; height: 6px;
        border-radius: 50%;
        background: var(--brand-border);
        transition: background .15s ease;
    }
    .sidebar .sidebar-menu > ul li ul li a:hover { color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), 0.05); }
    .sidebar .sidebar-menu > ul li ul li a:hover::before { background: var(--brand-primary); }

/* Active states */
[data-color=primary] .sidebar .sidebar-menu > ul > li.active > a,
[data-color=primary] .sidebar .sidebar-menu > ul > li > a.active,
[data-color=primary] .sidebar .sidebar-menu > ul > li > a.subdrop,
.sidebar .sidebar-menu > ul > li.active > a,
.sidebar .sidebar-menu > ul > li > a.active,
.sidebar .sidebar-menu > ul > li > a.subdrop {
    background: rgba(var(--brand-primary-rgb), 0.10) !important;
    color: var(--brand-primary) !important;
}

[data-color=primary] .sidebar .sidebar-menu > ul > li.active > a::before,
[data-color=primary] .sidebar .sidebar-menu > ul > li > a.active::before,
.sidebar .sidebar-menu > ul > li.active > a::before,
.sidebar .sidebar-menu > ul > li > a.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 7px;
    bottom: 7px;
    width: 4px;
    background: var(--brand-secondary);
    border-radius: 0 4px 4px 0;
}

[data-color=primary] .sidebar .sidebar-menu > ul > li ul li a.active,
.sidebar .sidebar-menu > ul > li ul li a.active {
    color: var(--brand-primary) !important;
    background: rgba(var(--brand-primary-rgb), 0.08) !important;
    font-weight: 600;
}
    .sidebar .sidebar-menu > ul > li ul li a.active::before { background: var(--brand-primary); }

/* Keep the active open submenu aligned; the base template has stronger
   .submenu-open rules that otherwise remove the child indentation. */
.sidebar .sidebar-menu > ul > li.submenu > ul,
.sidebar .sidebar-menu > ul > li.submenu-open > ul {
    list-style: none;
    margin: 0 !important;
    padding: 2px 0 4px !important;
    border-bottom: 0 !important;
}

.sidebar .sidebar-menu > ul > li.submenu > ul > li > a,
.sidebar .sidebar-menu > ul > li.submenu-open > ul > li > a {
    display: flex !important;
    align-items: center;
    width: auto !important;
    min-height: 36px;
    margin: 1px 12px !important;
    padding: 8px 12px 8px 46px !important;
    color: var(--brand-muted);
    background: transparent;
    box-sizing: border-box;
}

.sidebar .sidebar-menu > ul > li.submenu > ul > li > a::after,
.sidebar .sidebar-menu > ul > li.submenu-open > ul > li > a::after {
    display: none !important;
    content: none !important;
}

.sidebar .sidebar-menu .menu-arrow::before { color: var(--brand-muted); }

/* Mini (collapsed) sidebar - icon-only */
@media (min-width: 992px) {
    body.mini-sidebar:not(.expand-menu) .sidebar .menu-title span { display: none; }
    body.mini-sidebar:not(.expand-menu) .sidebar .menu-title { text-align: center; padding: 12px 0 4px; }
    body.mini-sidebar:not(.expand-menu) .sidebar .menu-title::after { content: "..."; color: #cbd5e1; letter-spacing: 1px; }
    body.mini-sidebar:not(.expand-menu) .sidebar .sidebar-menu > ul > li > a > span,
    body.mini-sidebar:not(.expand-menu) .sidebar .sidebar-menu > ul li.submenu > a > span,
    body.mini-sidebar:not(.expand-menu) .sidebar .sidebar-menu .menu-arrow { display: none; }
    body.mini-sidebar:not(.expand-menu) .sidebar .sidebar-menu > ul > li > a,
    body.mini-sidebar:not(.expand-menu) .sidebar .sidebar-menu > ul li.submenu > a { justify-content: center; padding: 11px; }
    body.mini-sidebar:not(.expand-menu) .sidebar .sidebar-menu > ul > li > a > i { margin-right: 0; }
    body.mini-sidebar:not(.expand-menu) .sidebar .sidebar-menu > ul li ul { display: none !important; }
}

/* ============================================================
   6. CARDS
   ============================================================ */
.card {
    background: var(--brand-surface) !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: var(--brand-radius) !important;
    box-shadow: var(--brand-shadow-card) !important;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--brand-border) !important;
    padding: 16px 20px 14px !important;
}

.card-title { color: var(--brand-text); font-weight: 700; }

.title-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--brand-primary-rgb), 0.10);
    color: var(--brand-primary);
}
    .title-icon.bg-soft-orange, .title-icon.bg-soft-danger { background: rgba(var(--brand-secondary-rgb), 0.12); color: var(--brand-secondary); }

/* ============================================================
   7. WELCOME / HERO BANNER
   ============================================================ */
.as-welcome-banner {
    background: linear-gradient(120deg, #171717 0%, #991B1B 48%, #EF2B32 100%) !important;
    color: #fff !important;
    border-radius: var(--brand-radius) !important;
    min-height: 132px;
    padding: 24px 28px !important;
    margin-bottom: 24px;
    position: relative;
    overflow: visible;
    box-shadow: 0 12px 32px rgba(var(--brand-primary-rgb), 0.18);
    border: none !important;
}
    /* clipped background layer holds the decorative glow + globe icon, so the
       banner itself can keep overflow:visible and let the date dropdown show fully */
    .as-welcome-banner .as-banner-bg {
        position: absolute;
        inset: 0;
        border-radius: inherit;
        overflow: hidden;
        z-index: 0;
        pointer-events: none;
    }
    /* subtle brand glow accent in the corner */
    .as-welcome-banner .as-banner-bg::before {
        content: "";
        position: absolute;
        top: -60px; right: -40px;
        width: 280px; height: 280px;
        background: radial-gradient(circle, rgba(var(--brand-primary-rgb),0.38), transparent 65%);
        pointer-events: none;
    }

    .as-welcome-banner h2,
    .as-welcome-banner h3,
    .as-welcome-banner h6 { color: #fff !important; font-weight: 700; margin-bottom: 6px; }

    .as-welcome-banner p,
    .as-welcome-banner .welcome-text p { color: rgba(255, 255, 255, 0.85) !important; margin-bottom: 0; }

    .as-welcome-banner .as-banner-icon {
        position: absolute;
        right: -18px;
        bottom: -76px;
        width: 300px;
        height: 300px;
        opacity: 0.16;
        pointer-events: none;
        background: url("/Content/assets/img/CompanyLogo.png") center / contain no-repeat;
        filter: saturate(1.05) drop-shadow(0 20px 44px rgba(0, 0, 0, .18));
    }
        .as-welcome-banner .as-banner-icon svg { display: none; }

    .as-welcome-banner .welcome-text { position: relative; z-index: 1; }
    .as-welcome-banner .as-banner-controls { position: relative; z-index: 30; }
    .as-welcome-banner .dropdown { position: relative; z-index: 40; }
    .as-welcome-banner .dropdown-menu {
        z-index: 1085 !important;
        border: 1px solid var(--brand-border);
        border-radius: var(--brand-radius-sm);
        box-shadow: 0 18px 44px rgba(6, 42, 86, .18);
    }

    /* Date dropdown as a clean glass control */
    .as-welcome-banner .as-banner-controls .dropdown-toggle,
    .as-welcome-banner .as-banner-controls .btn-white {
        background: rgba(255, 255, 255, 0.14) !important;
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, 0.30) !important;
        border-radius: var(--brand-radius-sm) !important;
        backdrop-filter: blur(4px);
        height: 40px;
        font-weight: 600;
        padding: 0 16px;
    }
        .as-welcome-banner .as-banner-controls .dropdown-toggle:hover { background: rgba(255,255,255,0.22) !important; }
        .as-welcome-banner .as-banner-controls .dropdown-toggle::after { display: none !important; }

    /* Table-top icon buttons (refresh) - glassy circles */
    .as-welcome-banner .table-top-head { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
    .as-welcome-banner .table-top-head li a {
        width: 40px; height: 40px;
        border-radius: var(--brand-radius-sm);
        display: inline-flex; align-items: center; justify-content: center;
        background: rgba(255, 255, 255, 0.14) !important;
        border: 1px solid rgba(255, 255, 255, 0.30);
        color: #fff !important;
        cursor: pointer;
    }
        .as-welcome-banner .table-top-head li a:hover { background: rgba(255,255,255,0.24) !important; }
        .as-welcome-banner .table-top-head li a i { font-size: 18px; }

/* ============================================================
   8. STAT TILES (Draft / Booked / Forwarded / ...)
   ============================================================ */
.as-stat-row { margin-bottom: 8px; }

.as-stat-card {
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-shadow-card);
    padding: 18px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
    .as-stat-card:hover { transform: translateY(-2px); box-shadow: var(--brand-shadow-hover); border-color: rgba(var(--brand-primary-rgb), 0.35); }

    .as-stat-card .as-stat-icon {
        width: 48px; height: 48px;
        border-radius: 12px;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--brand-primary);
        color: #fff;
        flex-shrink: 0;
    }
        .as-stat-card .as-stat-icon i { font-size: 22px; color: #fff; }

    .as-stat-card .as-stat-value { font-size: 26px; font-weight: 800; line-height: 1; margin: 0; color: var(--brand-text); }
    .as-stat-card .as-stat-label { font-size: 13px; color: var(--brand-muted); margin: 4px 0 0; font-weight: 500; }

/* ============================================================
   8b. KPI CARDS
   ============================================================ */
.as-kpi-row { margin-bottom: 24px; }

.as-kpi-card {
    background: #fff;
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-shadow-card);
    padding: 20px 20px 16px;
    border: 1px solid var(--brand-border);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform .18s ease, box-shadow .18s ease;
    color: var(--brand-text);
    position: relative;
    overflow: hidden;
}
    /* bottom accent bar instead of a left border */
    .as-kpi-card::after {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 3px;
        background: var(--brand-primary);
    }
    .as-kpi-card.as-kpi-accent-orange::after { background: var(--brand-secondary); }

    .as-kpi-card:hover { transform: translateY(-3px); box-shadow: var(--brand-shadow-hover); }

    .as-kpi-card .as-kpi-icon {
        width: 44px; height: 44px;
        border-radius: 12px;
        display: inline-flex; align-items: center; justify-content: center;
        background: rgba(var(--brand-primary-rgb), 0.10);
        color: var(--brand-primary);
        margin-bottom: 14px;
        font-size: 20px;
    }
    .as-kpi-card.as-kpi-accent-orange .as-kpi-icon { background: rgba(var(--brand-secondary-rgb), 0.12); color: var(--brand-secondary); }

    .as-kpi-card .as-kpi-value { font-size: 27px; font-weight: 800; color: var(--brand-text); margin: 0; line-height: 1.1; }
    .as-kpi-card .as-kpi-label { font-size: 13px; color: var(--brand-muted); margin-top: 4px; font-weight: 500; }

    /* trend rendered as a pill badge */
    .as-kpi-card .as-kpi-trend {
        margin-top: 14px;
        align-self: flex-start;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 999px;
    }
        .as-kpi-card .as-kpi-trend.as-trend-up { color: var(--brand-success); background: rgba(16, 185, 129, 0.12); }
        .as-kpi-card .as-kpi-trend.as-trend-down { color: var(--brand-danger); background: rgba(239, 68, 68, 0.12); }

/* legacy dash-count used on other dashboards - keep tidy */
.dash-count { border-radius: var(--brand-radius) !important; box-shadow: var(--brand-shadow-card); transition: transform .18s ease, box-shadow .18s ease; }
    .dash-count:hover { transform: translateY(-3px); box-shadow: var(--brand-shadow-hover); }

/* Partner / fuel mini-cards */
.info-item { border-radius: var(--brand-radius-sm); }
.avatar.bg-primary { background: var(--brand-primary) !important; }

/* ============================================================
   9. TABLES
   ============================================================ */
.table { color: var(--brand-text); }

.table thead th {
    background: #f8fafc !important;
    color: var(--brand-text) !important;
    font-weight: 700;
    border-bottom: 1px solid var(--brand-border);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.table tbody tr { transition: background-color .12s ease; }
.table tbody tr:hover { background: var(--brand-bg) !important; }
.table td, .table th { border-color: var(--brand-border); vertical-align: middle; }

.as-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(var(--brand-primary-rgb), 0.10);
    color: var(--brand-primary);
}

    .as-status-pill.as-pill-intransit { background: rgba(var(--brand-secondary-rgb), 0.14); color: var(--brand-secondary); }
    .as-status-pill.as-pill-pending { background: rgba(100, 116, 139, 0.12); color: var(--brand-muted); }
    .as-status-pill.as-pill-delivered { background: rgba(16, 185, 129, 0.12); color: var(--brand-success); }

.as-route-arrow { display: inline-block; margin: 0 8px; color: var(--brand-secondary); font-weight: 700; }

/* ============================================================
   10. FORMS
   ============================================================ */
.as-form-section {
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    padding: 22px 24px;
    margin-bottom: 20px;
    box-shadow: var(--brand-shadow-card);
}

    .as-form-section .as-section-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding-bottom: 12px;
        margin-bottom: 18px;
        border-bottom: 1px solid var(--brand-border);
    }

        .as-form-section .as-section-head .as-section-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--brand-secondary);
            box-shadow: 0 0 0 4px rgba(var(--brand-secondary-rgb), 0.15);
        }

        .as-form-section .as-section-head h5,
        .as-form-section .as-section-head h6 {
            margin: 0;
            font-weight: 700;
            color: var(--brand-text);
        }

.as-form-group { margin-bottom: 18px; }

.as-label,
.as-form-group > label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-text);
    margin-bottom: 6px;
}

/* Orange-dot required indicator (replaces template's red *) */
.as-required-dot,
label .text-danger,
label small.text-danger {
    color: transparent !important;
    position: relative;
    width: 8px;
    height: 8px;
    display: inline-block;
    background: var(--brand-secondary);
    border-radius: 50%;
    margin-left: 6px;
    font-size: 0 !important;
    vertical-align: middle;
    line-height: 0;
}

.as-input,
.form-control {
    background: #fff !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: var(--brand-radius-sm) !important;
    min-height: 44px;
    padding: 10px 14px !important;
    font-size: 14px;
    color: var(--brand-text) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

textarea.form-control, textarea.as-input { min-height: 96px; padding: 12px 14px !important; }

.select2-container--default .select2-selection--single {
    background: #fff !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: var(--brand-radius-sm) !important;
    min-height: 44px;
    height: 44px;
    padding: 8px 12px !important;
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 26px;
        padding-left: 0;
        color: var(--brand-text);
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }

.form-control:focus,
.as-input:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 4px rgba(var(--brand-primary-rgb), 0.12) !important;
    outline: none;
}

.pac-container {
    z-index: 1080;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-sm);
    box-shadow: var(--brand-shadow-card);
    font-family: inherit;
}

.form-control.input-validation-error,
.as-input.input-validation-error {
    border-color: var(--brand-danger) !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.10) !important;
}

.field-validation-error,
.as-error {
    color: var(--brand-danger) !important;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.as-helper { font-size: 12px; color: var(--brand-muted); margin-top: 4px; }

.as-btn-submit,
.btn-login {
    background: var(--brand-secondary) !important;
    color: #fff !important;
    border: none !important;
    height: 44px;
    padding: 0 26px !important;
    border-radius: var(--brand-radius-sm) !important;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(var(--brand-secondary-rgb), 0.28);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    .as-btn-submit:hover,
    .btn-login:hover {
        background: #7F1D1D !important;
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(var(--brand-secondary-rgb), 0.38);
    }

.as-btn-cancel {
    background: transparent;
    color: var(--brand-primary);
    border: 1px solid var(--brand-primary);
    height: 44px;
    padding: 0 22px;
    border-radius: var(--brand-radius-sm);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

    .as-btn-cancel:hover { background: rgba(var(--brand-primary-rgb), 0.08); color: var(--brand-primary); }

/* ============================================================
   11. LOGIN PAGE (legacy template hooks - kept harmless;
   the live login page is self-contained under .asg-login)
   ============================================================ */
.account-page,
body.account-page { background: var(--brand-bg) !important; }

.login-wrapper { min-height: 100vh; background: var(--brand-bg); }

.login-content { background: #fff; box-shadow: 0 30px 60px rgba(15, 23, 42, 0.10); border-radius: var(--brand-radius); padding: 40px; }

.login-img { background: var(--brand-gradient); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
    .login-img img { max-width: 72%; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.25)); }

.forgot-link { color: var(--brand-secondary) !important; font-weight: 600; }

/* ============================================================
   12. PAGE HEADER (used on most internal views)
   ============================================================ */
.page-header {
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    padding: 18px 22px;
    margin-bottom: 22px;
    box-shadow: var(--brand-shadow-card);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

    .page-header .page-title h4 { color: var(--brand-text); font-weight: 700; margin-bottom: 2px; }
    .page-header .page-title h4 i { color: var(--brand-secondary); margin-right: 6px; }
    .page-header .page-title h6 { color: var(--brand-muted); font-size: 13px; margin: 0; }

/* ============================================================
   12b. SHIPMENT WIZARD (Shipment/Create.cshtml)
   ============================================================ */
.as-shipment-wizard { overflow: hidden; }

.as-shipment-wizard .card-body { background: var(--brand-bg); }

.as-wizard-tabs {
    background: #fff;
    border-radius: var(--brand-radius);
    padding: 8px;
    border: 1px solid var(--brand-border);
    box-shadow: var(--brand-shadow-card);
    gap: 6px;
}

    .as-wizard-tabs .nav-item { flex: 1 1 auto; min-width: 0; }

    .as-wizard-tabs .nav-link {
        background: transparent;
        color: var(--brand-muted) !important;
        font-weight: 600;
        font-size: 14px;
        border: 1px solid transparent;
        border-radius: var(--brand-radius-sm);
        padding: 10px 14px;
        transition: all .15s ease;
        white-space: nowrap;
    }

        .as-wizard-tabs .nav-link i { margin-right: 6px; }

        .as-wizard-tabs .nav-link:hover {
            background: rgba(var(--brand-primary-rgb), 0.05);
            color: var(--brand-primary) !important;
            border-color: rgba(var(--brand-primary-rgb), 0.10);
        }

        .as-wizard-tabs .nav-link.active {
            background: var(--brand-gradient) !important;
            color: #fff !important;
            border-color: transparent;
            box-shadow: 0 6px 16px rgba(var(--brand-primary-rgb), 0.22);
        }

.as-choose-party { margin-top: 12px; }

.as-shipment-wizard .as-form-section { background: #fff; }

@media (max-width: 575px) {
    .as-wizard-tabs { padding: 6px; }
    .as-wizard-tabs .nav-link { padding: 8px 10px; font-size: 13px; }
    .as-wizard-tabs .nav-link i { display: none; }
}

/* ============================================================
   13. MISC HELPERS
   ============================================================ */
.as-divider { height: 1px; background: var(--brand-border); margin: 16px 0; }
.as-soft-blue { background: rgba(var(--brand-primary-rgb), 0.10) !important; color: var(--brand-primary) !important; }
.as-soft-orange { background: rgba(var(--brand-secondary-rgb), 0.12) !important; color: var(--brand-secondary) !important; }

.marquee-wrapper {
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-sm);
    overflow: hidden;
}

.as-quick-actions { display: flex; flex-direction: column; gap: 10px; }

    .as-quick-actions .as-quick-action {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        border-radius: var(--brand-radius-sm);
        border: 1px solid var(--brand-border);
        background: #fff;
        color: var(--brand-text);
        text-decoration: none;
        font-weight: 600;
        font-size: 14px;
        transition: all .15s ease;
    }

        .as-quick-actions .as-quick-action:hover {
            border-color: var(--brand-primary);
            background: rgba(var(--brand-primary-rgb), 0.05);
            color: var(--brand-primary);
            transform: translateX(2px);
        }

        .as-quick-actions .as-quick-action .as-qa-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(var(--brand-secondary-rgb), 0.12);
            color: var(--brand-secondary);
            flex-shrink: 0;
        }

.copyright-footer {
    background: #fff !important;
    border-top: 1px solid var(--brand-border) !important;
    padding: 14px 22px !important;
}

    .copyright-footer a { color: var(--brand-primary); font-weight: 600; }
    .as-footer-contact span { font-size: 12.5px; color: var(--brand-muted); }
    .as-footer-contact i { color: var(--brand-secondary); }

@media (max-width: 991.98px) {
    .as-footer-contact { display: none !important; }
}

/* ============================================================
   14. TOPBAR SEARCH DROPDOWN (suggestions + Menu_Search results)
   ============================================================ */
.search-dropdown {
    width: 360px !important;
    height: auto !important;
    max-height: 440px !important;
    overflow-y: auto !important;
    padding: 12px !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: var(--brand-radius) !important;
    box-shadow: var(--brand-shadow-hover) !important;
    background: #fff !important;
    margin-top: 8px !important;
}
    .search-dropdown .search-info { color: var(--brand-text) !important; margin: 0 !important; padding: 0 !important; border: none !important; }

.as-search-results { width: 100%; }

.as-search-results-head,
.search-dropdown .search-info h6 {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--brand-muted);
    padding: 2px 6px 10px;
    margin: 0 0 6px !important;
    border-bottom: 1px solid var(--brand-border);
}

.as-search-results-title { display: inline-flex; align-items: center; gap: 7px; }
    .as-search-results-title i { color: var(--brand-secondary); font-size: 15px; }

.as-search-count {
    background: rgba(var(--brand-primary-rgb), 0.10);
    color: var(--brand-primary);
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 11px;
    font-weight: 700;
}

.as-result-list { list-style: none; margin: 0; padding: 0; }
    .as-result-list li { margin: 0; }

.as-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: var(--brand-radius-sm);
    color: var(--brand-text);
    text-decoration: none;
    transition: background .12s ease, color .12s ease;
}
    .as-result-item:hover { background: rgba(var(--brand-primary-rgb), 0.07); color: var(--brand-primary); }

    .as-result-icon {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(var(--brand-secondary-rgb), 0.12);
        color: var(--brand-secondary);
        flex-shrink: 0;
        font-size: 16px;
    }
        .as-result-item:hover .as-result-icon { background: var(--brand-primary); color: #fff; }

    .as-result-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.25; }
    .as-result-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .as-result-parent { font-size: 11px; color: var(--brand-muted); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .as-result-parent i { font-size: 12px; flex-shrink: 0; }

    .as-result-go { color: var(--brand-muted); font-size: 16px; flex-shrink: 0; opacity: 0; transform: translateX(-4px); transition: all .12s ease; }
        .as-result-item:hover .as-result-go { opacity: 1; transform: none; color: var(--brand-primary); }

.as-result-empty { text-align: center; padding: 28px 16px 22px; }
    .as-result-empty-icon {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--brand-bg);
        color: var(--brand-muted);
        font-size: 26px;
        margin-bottom: 12px;
    }
    .as-result-empty-title { font-size: 14px; font-weight: 600; color: var(--brand-text); margin: 0 0 2px; }
    .as-result-empty-sub { font-size: 12px; color: var(--brand-muted); margin: 0; }


/* loading spinner injected before results */
.search-dropdown .loading-overlay { display: flex; align-items: center; justify-content: center; padding: 40px 0; color: var(--brand-primary); }

/* ============================================================
   15. LIST / TABLE PAGES (Shipment_List and similar)
   ============================================================ */

/* Status filter cards */
.as-filter-row { margin-bottom: 22px; }

.as-filter-card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    padding: 14px;
    box-shadow: var(--brand-shadow-card);
    cursor: pointer;
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
    .as-filter-card:hover { transform: translateY(-2px); box-shadow: var(--brand-shadow-hover); border-color: rgba(var(--brand-primary-rgb), 0.35); }
    .as-filter-card.active { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.12); background: rgba(var(--brand-primary-rgb), 0.04); }
    .as-filter-card.active::after { content: ""; position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-primary); }

    .as-filter-icon {
        width: 46px; height: 46px;
        border-radius: 12px;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--brand-primary);
        color: #fff;
        flex-shrink: 0;
        font-size: 19px;
    }
        .as-filter-icon i { color: #fff; }

    .as-filter-meta { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
    .as-filter-count { font-size: 22px; font-weight: 800; color: var(--brand-text); }
    .as-filter-label { font-size: 12px; color: var(--brand-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* List toolbar (card header with date filter + relocated search) */
.as-list-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.as-filter-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0; }
    .as-filter-form .as-field { display: flex; flex-direction: column; }
    .as-filter-form .as-field label { font-size: 12px; font-weight: 600; color: var(--brand-muted); margin-bottom: 5px; }
    .as-filter-form .as-field input { height: 42px; min-width: 160px; }
    .as-apply-btn { height: 42px; display: inline-flex; align-items: center; gap: 6px; }

/* DataTables search box (relocated into .search-input) */
.as-table-search { display: flex; align-items: flex-end; flex: 1 1 auto; justify-content: flex-end; }
.dataTables_filter { margin: 0; }
    .dataTables_filter label { margin: 0; font-size: 0; }
    .dataTables_filter input {
        height: 42px;
        min-width: 250px;
        border: 1px solid var(--brand-border) !important;
        border-radius: 999px !important;
        padding: 0 18px !important;
        background: var(--brand-bg) !important;
        font-size: 14px;
        margin: 0 !important;
    }
        .dataTables_filter input:focus { border-color: var(--brand-primary) !important; box-shadow: 0 0 0 4px rgba(var(--brand-primary-rgb), 0.12) !important; background: #fff !important; outline: none; }

/* DataTables bottom controls */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info { color: var(--brand-muted); font-size: 13px; padding: 14px 18px; }
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    padding: 5px 10px;
    margin: 0 6px;
    color: var(--brand-text);
    background: #fff;
}
.dataTables_wrapper .dataTables_paginate { padding: 12px 16px; }
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .page-link {
    border-radius: 8px !important;
    margin: 0 2px;
    border: 1px solid var(--brand-border) !important;
    color: var(--brand-text) !important;
    background: #fff !important;
    min-width: 34px;
    text-align: center;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .page-link:hover {
    background: rgba(var(--brand-primary-rgb), 0.08) !important;
    color: var(--brand-primary) !important;
    border-color: rgba(var(--brand-primary-rgb), 0.30) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link { opacity: .5; }

/* Table cell helpers */
.as-cell-strong { font-weight: 700; color: var(--brand-text); }
.as-cell-sub { font-size: 11.5px; color: var(--brand-muted); }
.as-mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-weight: 600; letter-spacing: .2px; color: var(--brand-text); }

.as-type-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    background: rgba(var(--brand-primary-rgb), 0.08); color: var(--brand-primary);
}

.as-country-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--brand-muted); margin-top: 2px; }
    .as-country-chip .as-cc { background: var(--brand-bg); border: 1px solid var(--brand-border); border-radius: 5px; padding: 0 6px; font-size: 10.5px; font-weight: 700; color: var(--brand-text); letter-spacing: .3px; }

.as-net-logo { width: 26px; height: 26px; object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid var(--brand-border); padding: 2px; flex-shrink: 0; }

.as-status-tag {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
    background: var(--brand-bg); color: var(--brand-text);
    border: 1px solid var(--brand-border);
    white-space: nowrap;
}
    .as-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; background: var(--brand-primary); }

.as-price { font-weight: 800; color: var(--brand-text); font-size: 14px; }

/* Shipment list table: keep the list inside the card width */
.as-shipment-table-wrap.table-responsive { overflow-x: hidden; }

.as-shipment-table.dataTable,
.as-shipment-table {
    width: 100% !important;
    table-layout: fixed;
}

.as-shipment-table th,
.as-shipment-table td {
    vertical-align: middle;
    white-space: normal;
    overflow-wrap: anywhere;
    padding-left: 8px;
    padding-right: 8px;
}

.as-shipment-table .as-col-date { width: 8%; }
.as-shipment-table .as-col-type { width: 7%; }
.as-shipment-table .as-col-tracking { width: 12%; }
.as-shipment-table .as-col-consignee { width: 17%; }
.as-shipment-table .as-col-party { width: 11%; }
.as-shipment-table .as-col-service { width: 21%; }
.as-shipment-table .as-col-status { width: 10%; }
.as-shipment-table .as-col-amount { width: 7%; }
.as-shipment-table .as-col-actions { width: 7%; }

.as-shipment-table .as-type-badge,
.as-shipment-table .as-status-tag {
    max-width: 100%;
}

.as-shipment-table .as-type-badge {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.as-shipment-table .d-flex,
.as-shipment-table .d-flex > div {
    min-width: 0;
}

.as-shipment-table .as-awb-inline {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.as-shipment-table .as-awb-inline i {
    color: var(--brand-primary);
    font-size: 12px;
}

.as-shipment-table .as-awb-inline span {
    color: var(--brand-primary);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.as-shipment-table .as-actions {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.as-shipment-table .as-action-btn {
    width: 30px;
    height: 30px;
}

/* Row action buttons */
.as-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.as-action-btn {
    width: 34px; height: 34px;
    border-radius: 9px;
    border: 1px solid var(--brand-border);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--brand-muted);
    background: #fff;
    cursor: pointer;
    text-decoration: none;
    transition: all .12s ease;
}
    .as-action-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), 0.06); }
    .as-action-btn.as-action-edit:hover { border-color: var(--brand-secondary); color: var(--brand-secondary); background: rgba(var(--brand-secondary-rgb), 0.08); }
    .as-action-btn.as-action-del:hover { border-color: var(--brand-danger); color: var(--brand-danger); background: rgba(239, 68, 68, 0.08); }
    .as-action-btn i { font-size: 16px; }
    .as-action-btn.dropdown-toggle::after { display: none; }

/* Modal polish */
.modal-content { border: none !important; border-radius: var(--brand-radius) !important; box-shadow: 0 24px 60px rgba(10, 22, 40, 0.22) !important; }
.modal-header { border-bottom: 1px solid var(--brand-border) !important; padding: 16px 20px !important; }
    .modal-header .modal-title { font-weight: 700; color: var(--brand-text); display: inline-flex; align-items: center; gap: 8px; }
    .modal-header .modal-title i { color: var(--brand-secondary); }
.modal-body { padding: 20px !important; }

@media (max-width: 991.98px) {
    .as-list-toolbar { align-items: stretch; }
    .as-table-search { justify-content: flex-start; }
    .dataTables_filter input { min-width: 100%; width: 100%; }

    .as-shipment-table-wrap.table-responsive {
        overflow-x: hidden;
        padding: 0 12px 12px;
    }

    .as-shipment-table.dataTable,
    .as-shipment-table,
    .as-shipment-table thead,
    .as-shipment-table tbody,
    .as-shipment-table tr,
    .as-shipment-table td {
        display: block;
        width: 100% !important;
    }

    .as-shipment-table thead {
        display: none;
    }

    .as-shipment-table tbody tr {
        margin: 12px 0;
        padding: 12px 14px;
        border: 1px solid var(--brand-border);
        border-radius: var(--brand-radius-sm);
        background: #fff;
        box-shadow: var(--brand-shadow-card);
    }

    .as-shipment-table tbody td {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        border: 0 !important;
        border-bottom: 1px solid var(--brand-border) !important;
        padding: 9px 0 !important;
        text-align: left !important;
    }

    .as-shipment-table tbody td:last-child {
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .as-shipment-table tbody td::before {
        content: attr(data-label);
        color: var(--brand-muted);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.4;
        text-transform: uppercase;
    }

    .as-shipment-table .as-col-actions {
        display: block;
    }

    .as-shipment-table .as-col-actions::before {
        display: block;
        margin-bottom: 8px;
    }

    .as-shipment-table .as-actions {
        justify-content: flex-start;
    }

    .as-shipment-table .as-type-badge {
        white-space: normal;
        text-overflow: clip;
    }

    .as-shipment-table td.dataTables_empty {
        display: block;
        text-align: center !important;
        border-bottom: 0 !important;
    }

    .as-shipment-table td.dataTables_empty::before {
        content: "";
        display: none;
    }
}

/* ============================================================
   16. DESTINY REBRAND REFINEMENTS
   Scoped visual upgrades for requested courier workflows.
   ============================================================ */

/* Header wordmark beside the uploaded True Time Express logo */
.header .header-left .as-topbar-logo {
    justify-content: flex-start;
    gap: 10px;
    text-decoration: none !important;
}

.header .header-left .as-topbar-logo img {
    width: 54px;
    height: 46px;
    object-fit: contain;
    padding: 4px;
    border-radius: 12px;
    background: #fff;
}

.header .header-left .as-topbar-logo .as-wordmark {
    display: flex;
}

.header .header-left .as-wordmark .as-wordmark-top {
    font-size: 18px;
    letter-spacing: 0;
    color: var(--brand-dark);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
}

.header .header-left .as-wordmark .as-wordmark-bottom {
    color: var(--brand-secondary);
    letter-spacing: 1px;
}

body.mini-sidebar .header .header-left .as-topbar-logo {
    justify-content: center;
}

body.mini-sidebar .header .header-left .as-topbar-logo .as-wordmark {
    display: none !important;
}

/* Page headers */
.page-header {
    background:
        linear-gradient(135deg, rgba(var(--brand-primary-rgb), .10), rgba(var(--brand-secondary-rgb), .10)),
        #fff;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-shadow-card);
    padding: 18px 20px;
    margin-bottom: 22px;
}

.page-header .page-title h4,
.page-header .page-title h6 {
    margin-bottom: 0;
}

.page-header .page-title h4 {
    color: var(--brand-dark);
}

.page-header .page-title h4 i,
.page-header .title-icon i {
    color: var(--brand-secondary);
}

.page-header .page-title h6 {
    color: var(--brand-muted);
    margin-top: 4px;
    font-size: 13px;
}

/* Cards, tables, and form controls used across target pages */
.card {
    border: 1px solid var(--brand-border) !important;
    border-radius: var(--brand-radius) !important;
    box-shadow: var(--brand-shadow-card) !important;
}

.card-header {
    background: linear-gradient(180deg, #fff, #fbfdff) !important;
    border-bottom: 1px solid var(--brand-border) !important;
    border-radius: var(--brand-radius) var(--brand-radius) 0 0 !important;
}

.card-title {
    color: var(--brand-dark);
    font-weight: 700;
}

.form-control,
.form-select,
select.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--brand-border) !important;
    border-radius: 10px !important;
    min-height: 42px;
    color: var(--brand-text);
    background-color: #fff;
}

.form-control:focus,
.form-select:focus,
select.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 4px rgba(var(--brand-primary-rgb), .12) !important;
}

label,
.control-label,
.as-label {
    color: var(--brand-dark);
    font-weight: 650;
    font-size: 13px;
}

.table {
    color: var(--brand-text);
}

.table thead th,
.table-light th {
    background: #eef5ff !important;
    color: var(--brand-dark) !important;
    border-bottom: 1px solid var(--brand-border) !important;
    font-weight: 750;
    font-size: 12px;
    text-transform: uppercase;
}

.table tbody td {
    border-color: #eef2f7 !important;
}

.datatable tbody tr:hover,
.table tbody tr:hover {
    background: rgba(var(--brand-primary-rgb), .035);
}

/* Dashboard cards */
.as-welcome-banner,
.welcome-wrap {
    position: relative;
    background:
        radial-gradient(580px 180px at 88% 18%, rgba(var(--brand-secondary-rgb), .28), transparent 60%),
        linear-gradient(135deg, var(--brand-dark), #991B1B 68%, #EF2B32) !important;
    color: #fff;
    border-radius: var(--brand-radius);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 18px 40px rgba(6, 42, 86, .24);
    padding: 24px;
    margin-bottom: 22px;
}

.as-welcome-banner {
    overflow: visible !important;
}

.welcome-wrap {
    overflow: hidden;
}

.as-welcome-banner .welcome-text h2,
.welcome-wrap h2 {
    color: #fff;
    font-weight: 800;
}

.as-welcome-banner .welcome-text p,
.welcome-wrap b {
    color: rgba(255,255,255,.82);
}

.dash-count,
.as-stat-card,
.as-kpi-card,
.sales-cards .card.color-info,
.sales-cards > div > .card {
    border-radius: var(--brand-radius) !important;
    border: 1px solid rgba(var(--brand-primary-rgb), .10);
    box-shadow: var(--brand-shadow-card);
    transition: transform .16s ease, box-shadow .16s ease;
}

.dash-count:hover,
.as-stat-card:hover,
.as-kpi-card:hover,
.sales-cards > div > .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--brand-shadow-hover);
}

.dash-count {
    width: 100%;
    background: linear-gradient(135deg, var(--brand-dark), var(--brand-primary)) !important;
}

.dash-count .dash-imgs i {
    color: rgba(255,255,255,.92);
}

.sales-cards .card.color-info.bg-secondary {
    background: linear-gradient(135deg, #991B1B, #EF2B32) !important;
}

/* Executive dashboard KPI cards */
.as-kpi-row.g-3 {
    --bs-gutter-x: 18px;
    --bs-gutter-y: 18px;
    margin-bottom: 28px;
}

.as-kpi-card,
.as-kpi-card.as-kpi-accent-orange {
    min-height: 178px;
    padding: 22px 22px 18px;
    border-radius: 18px !important;
    border: 1px solid #dbe7f5 !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,251,255,.98) 100%) !important;
    box-shadow: 0 14px 36px rgba(6, 42, 86, .08) !important;
    color: var(--brand-text) !important;
    overflow: hidden;
    isolation: isolate;
}

.as-kpi-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--brand-primary), #991B1B);
    z-index: 1;
}

.as-kpi-card.as-kpi-accent-orange::before {
    background: linear-gradient(90deg, #991B1B, #EF2B32);
}

.as-kpi-card::after {
    content: "";
    position: absolute;
    right: -52px;
    top: -54px;
    width: 152px;
    height: 152px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--brand-primary-rgb), .13), transparent 68%);
    z-index: -1;
}

.as-kpi-card.as-kpi-accent-orange::after {
    background: radial-gradient(circle, rgba(var(--brand-secondary-rgb), .16), transparent 68%);
}

.as-kpi-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--brand-primary-rgb), .28) !important;
    box-shadow: 0 20px 44px rgba(6, 42, 86, .13) !important;
}

.as-kpi-card .as-kpi-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), .12), rgba(var(--brand-secondary-rgb), .08));
    color: var(--brand-primary);
    box-shadow: inset 0 0 0 1px rgba(var(--brand-primary-rgb), .08);
}

.as-kpi-card.as-kpi-accent-orange .as-kpi-icon {
    background: linear-gradient(135deg, rgba(var(--brand-secondary-rgb), .16), rgba(var(--brand-primary-rgb), .10));
    color: var(--brand-secondary);
    box-shadow: inset 0 0 0 1px rgba(var(--brand-secondary-rgb), .10);
}

.as-kpi-card .as-kpi-icon i {
    font-size: 24px;
    stroke-width: 1.8;
}

.as-kpi-card .as-kpi-value {
    margin: 0 0 6px;
    color: #111827 !important;
    font-size: clamp(25px, 2.1vw, 32px);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: 0;
    word-break: break-word;
}

.as-kpi-card .as-kpi-label {
    margin: 0;
    color: #50627F !important;
    font-size: 13.5px;
    line-height: 1.35;
    font-weight: 700;
}

.as-kpi-card .as-kpi-trend {
    margin-top: auto;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0;
    border: 1px solid transparent;
}

.as-kpi-card .as-kpi-trend.as-trend-up {
    color: #047857 !important;
    background: rgba(16, 185, 129, .10) !important;
    border-color: rgba(16, 185, 129, .16);
}

.as-kpi-card .as-kpi-trend.as-trend-down {
    color: #DC2626 !important;
    background: rgba(239, 68, 68, .09) !important;
    border-color: rgba(239, 68, 68, .15);
}

.as-kpi-card .as-kpi-trend i {
    font-size: 14px;
}

/* Top customers dashboard list */
.as-top-customers-card {
    overflow: hidden;
}

.as-top-customers-card .card-header {
    padding: 17px 20px;
}

.as-customer-count {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(var(--brand-primary-rgb), .08);
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
}

.as-top-customers-body {
    padding: 14px 16px 16px !important;
}

.as-customer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #edf2f7;
}

.as-customer-row:first-child {
    padding-top: 2px;
}

.as-customer-row:last-child {
    border-bottom: 0;
    padding-bottom: 2px;
}

.as-customer-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 230px;
}

.as-customer-avatar {
    position: relative;
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    overflow: visible;
    flex: 0 0 52px;
    background: #f4f8fc;
    box-shadow: inset 0 0 0 1px #e4edf7;
}

.as-customer-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    object-fit: cover;
    display: block;
}

.as-customer-avatar span {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-secondary);
    color: #fff;
    border: 2px solid #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.as-customer-info {
    min-width: 0;
}

.as-customer-info h6 {
    margin: 0 0 8px;
    color: var(--brand-dark);
    font-size: 14px;
    line-height: 1.25;
    font-weight: 800;
}

.as-customer-info h6 a {
    color: var(--brand-primary);
}

.as-customer-info h6 a:hover {
    color: var(--brand-secondary);
}

.as-customer-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.as-customer-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 26px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f6f9fc;
    color: #50627F;
    border: 1px solid #e7edf5;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

.as-customer-meta i {
    color: var(--brand-secondary);
    font-size: 12px;
}

.as-customer-amount {
    flex: 0 0 auto;
    align-self: center;
    margin-left: auto;
    min-width: 108px;
    padding: 8px 10px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), .10), rgba(var(--brand-secondary-rgb), .09));
    color: #111827;
    text-align: right;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 900;
}

@media (max-width: 575.98px) {
    .as-customer-main {
        flex-basis: 100%;
    }

    .as-customer-amount {
        margin-left: 64px;
        text-align: left;
    }
}

.as-customer-empty {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--brand-muted);
    text-align: center;
}

.as-customer-empty span {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--brand-primary-rgb), .08);
    color: var(--brand-primary);
    font-size: 22px;
}

.as-customer-empty p {
    margin: 0;
    font-size: 13px;
    font-weight: 750;
}

/* Store register/edit workflow */
.form-wizard-header,
.as-wizard-tabs,
.vertical-tabs-2 {
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    padding: 8px;
    box-shadow: var(--brand-shadow-card);
}

.form-wizard-header .nav-link,
.vertical-tabs-2 .nav-link {
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    color: var(--brand-muted) !important;
    font-weight: 700;
}

.form-wizard-header .nav-link.active,
.vertical-tabs-2 .nav-link.active {
    background: var(--brand-gradient) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(var(--brand-primary-rgb), .20);
}

.form-wizard-header .nav-link:hover,
.vertical-tabs-2 .nav-link:hover {
    background: rgba(var(--brand-primary-rgb), .07);
    color: var(--brand-primary) !important;
}

/* Shipment detail page */
.alert.alert-primary {
    background: #fff !important;
    border: 1px solid var(--brand-border) !important;
    border-left: 4px solid var(--brand-primary) !important;
    border-radius: var(--brand-radius-sm) !important;
    color: var(--brand-text) !important;
    box-shadow: var(--brand-shadow-card);
}

.alert.alert-primary .text-primary {
    color: var(--brand-text) !important;
}

.accordion-primary .accordion-item {
    border: 1px solid var(--brand-border) !important;
    border-radius: var(--brand-radius-sm) !important;
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: var(--brand-shadow-card);
}

.accordion-primary .accordion-button {
    background: #fff !important;
    color: var(--brand-dark) !important;
    font-weight: 750;
}

.accordion-primary .accordion-button:not(.collapsed) {
    background: rgba(var(--brand-primary-rgb), .08) !important;
    color: var(--brand-primary) !important;
}

.timeline-modern .timeline-body {
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-sm);
}

/* Vendor and service lists */
.search-set,
.as-table-search {
    min-height: 42px;
}

.form-switch .form-check-input {
    width: 42px;
    height: 22px;
    cursor: pointer;
    border-color: var(--brand-border);
}

.form-switch .form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.sell-product > .d-flex.align-items-center.justify-content-between {
    border: 1px solid var(--brand-border) !important;
    border-radius: var(--brand-radius-sm);
    padding: 12px;
    margin-bottom: 10px;
    background: linear-gradient(180deg, #fff, #fbfdff);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.sell-product > .d-flex.align-items-center.justify-content-between:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--brand-primary-rgb), .35) !important;
    box-shadow: var(--brand-shadow-card);
}

.destiny-form-card > .card-body {
    padding: 24px;
}

.destiny-form-card .tab-content {
    background:
        linear-gradient(180deg, rgba(var(--brand-primary-rgb), .025), transparent 160px),
        #fff;
    border-radius: 0 0 var(--brand-radius-sm) var(--brand-radius-sm);
}

.destiny-register-tabs .nav-link i,
.destiny-profile-tabs .nav-link i {
    color: inherit;
}

.destiny-service-table td {
    vertical-align: middle;
}

.destiny-service-table .as-status-tag {
    justify-content: center;
}

.sell-product .avatar img,
.avatar.avatar-lg img {
    border: 1px solid var(--brand-border);
    background: #fff;
    object-fit: contain;
}

.badge.bg-outline-success,
.btn.bg-outline-success {
    border: 1px solid var(--brand-success) !important;
    color: var(--brand-success) !important;
    background: rgba(16, 185, 129, .08) !important;
}

.badge.bg-success,
.btn.bg-success {
    background: var(--brand-success) !important;
    color: #fff !important;
}

.btn-outline-primary,
.btn.btn-outline-primary {
    color: var(--brand-primary) !important;
    border-color: rgba(var(--brand-primary-rgb), .45) !important;
    border-radius: 10px !important;
}

.btn-outline-primary:hover,
.btn.btn-outline-primary:hover {
    background: var(--brand-primary) !important;
    color: #fff !important;
}

/* Compact mobile polish for requested table/form pages */
@media (max-width: 767.98px) {
    .page-header {
        align-items: stretch;
        gap: 12px;
        padding: 15px;
    }

    .page-header .page-btn,
    .page-header .table-top-head {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .form-wizard-header .nav-item,
    .as-wizard-tabs .nav-item {
        flex: 1 1 100%;
    }

    .vertical-tabs-2 {
        flex-direction: row !important;
        margin-bottom: 16px;
    }
}