/* Custom Styles extracted from global.css */
body {
    font-family: 'Inter', sans-serif;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ================================
   GLOBAL SCROLLBAR - White/Light Theme
   Light gray thumb (#D9D9D9) on transparent track
   ================================ */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #D9D9D9 transparent;
}

    /* Chrome, Edge, Safari */
    *::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

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

    *::-webkit-scrollbar-thumb {
        background: #D9D9D9;
        border-radius: 2px;
    }

        *::-webkit-scrollbar-thumb:hover {
            background: #BFBFBF;
        }

    *::-webkit-scrollbar-button {
        display: none;
        width: 0;
        height: 0;
    }

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.096px;
    line-height: 1.2;
}

    .status-badge::before {
        content: '';
        width: 12px;
        height: 12px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .status-badge.status-pending {
        background-color: rgba(255, 171, 97, 0.1);
        color: #f19747;
    }

        .status-badge.status-pending::before {
            background-image: url('/assets/cfa2861731f4ffa1f5bdc133b068e64cb144316a.svg');
        }

    .status-badge.status-success {
        background-color: rgba(81, 158, 138, 0.1);
        color: #519e8a;
    }

        .status-badge.status-success::before {
            background-image: url('/assets/658af2fcd03961375f246dd5fff9888477fef6d4.svg');
        }

    .status-badge.status-failed {
        background-color: rgba(255, 17, 0, 0.1);
        color: #ff1100;
    }

        .status-badge.status-failed::before {
            background-image: url('/assets/11976604bd28490eef9f04eb106d52253f43aae0.svg');
            width: 14px;
            height: 14px;
        }

    .status-badge.status-refunded {
        background-color: rgba(35, 141, 217, 0.1);
        color: #238dd9;
    }

        .status-badge.status-refunded::before {
            background-image: url('/assets/d504c591dfa5015ae62c5eac7b5bb4a8054b35a9.svg');
            width: 13px;
            height: 13px;
        }

/* FAQ */
.faq-content {
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.faq-item.expanded .faq-content {
    max-height: 500px;
    opacity: 1;
}

.faq-arrow {
    transition: transform 0.3s ease;
    transform: rotate(0deg);
}

.faq-item.expanded .faq-arrow {
    transform: rotate(180deg);
}

.list-bullet::before {
    content: "\2022";
    font-family: 'Arimo', sans-serif;
    font-size: 15.544px;
    color: #3c4044;
    margin-right: 9px;
}

/* Zigzag */
.zigzag-mobile {
    position: relative;
    background: white;
    border-left: 1px solid rgba(60,64,68,0.1);
    border-right: 1px solid rgba(60,64,68,0.1);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
}

    .zigzag-mobile::before {
        content: "";
        position: absolute;
        top: -6px;
        left: -1px;
        right: -1px;
        height: 6px;
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 12 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 6 L6 0 L12 6' fill='%23ffffff' stroke='%233c40441a' stroke-width='1'/%3E%3C/svg%3E");
        background-repeat: repeat-x;
        background-size: 12px 6px;
    }

    .zigzag-mobile::after {
        content: "";
        position: absolute;
        bottom: -6px;
        left: -1px;
        right: -1px;
        height: 6px;
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 12 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0 L6 6 L12 0' fill='%23ffffff' stroke='%233c40441a' stroke-width='1'/%3E%3C/svg%3E");
        background-repeat: repeat-x;
        background-size: 12px 6px;
    }

/* Mobile Overrides */
@media (max-width: 767px) {
    .mobile-page-container {
        padding-top: 90px !important;
        padding-bottom: 60px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .mobile-heading {
        font-size: 22px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        margin-bottom: 4px !important;
    }

    .mobile-input-section {
        gap: 20px !important;
        margin-bottom: 8px !important;
    }

    .mobile-input-wrapper {
        width: 100% !important;
    }

    .mobile-input-field {
        height: 56px !important;
        border-radius: 28px !important;
        padding: 8px 6px 8px 20px !important;
        box-shadow: 0 2px 12px rgba(81, 158, 138, 0.08) !important;
    }

        .mobile-input-field input {
            font-size: 16px !important;
        }

    .mobile-label {
        font-size: 13px !important;
        margin-left: 16px !important;
        margin-bottom: 6px !important;
    }

    .mobile-input-field .shrink-0 {
        height: 40px !important;
        border-radius: 20px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

        .mobile-input-field .shrink-0 span {
            font-size: 14px !important;
        }

    .mobile-illustration {
        max-width: 100% !important;
        padding: 0 20px !important;
        margin-top: 20px !important;
    }

    .mobile-results {
        margin-top: 32px !important;
        padding: 0 !important;
    }

    .mobile-no-data {
        padding: 32px 16px !important;
    }

    .mobile-no-data-image {
        max-width: 280px !important;
        margin-bottom: 24px !important;
    }

    .mobile-no-data-title {
        font-size: 22px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }

    .mobile-no-data-subtitle {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    .mobile-warning-section {
        margin-top: 48px !important;
        padding: 0 8px !important;
    }

    .mobile-warning-header {
        font-size: 15px !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    .mobile-warning-header-container {
        align-items: center !important;
    }

        .mobile-warning-header-container > div {
            align-self: center !important;
        }

    .mobile-warning-items {
        gap: 16px !important;
        padding: 0 !important;
    }

    .mobile-warning-item {
        max-width: 110px !important;
    }

        .mobile-warning-item p {
            white-space: nowrap !important;
            font-size: 11px !important;
        }

    .mobile-warning-icon {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 8px !important;
    }

    .mobile-warning-text {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }
}

@media (max-width: 1099px) {
    .mobile-tablet-radius {
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
    }

    #statusFilterDropdown {
        position: fixed !important;
        max-height: 280px;
        overflow-y: auto;
    }
}

@media screen and (min-width: 1200px) {
    /* Desktop: fix location-dot and connector alignment */
    .location-path {
        position: relative !important;
        min-height: 120px !important;
        padding-left: 30px !important;
    }

    .location-line .location-dot,
    .location-line-end .location-dot {
        position: absolute !important;
        left: -29px !important;
        width: 22px !important;
        height: 22px !important;
        z-index: 2 !important;
    }

    .location-line {
        position: relative !important;
        min-height: 40px !important;
    }

    .location-line-end {
        position: relative !important;
        min-height: 40px !important;
    }

    .location-connector {
        display: block !important;
        position: absolute !important;
        left: 11px !important;
        top: 22px !important;
        width: 2px !important;
        height: calc(100% - 44px) !important;
        background: #519e8a !important;
        z-index: 1 !important;
    }

    /* removed .location-line-end::after as requested */

    /* New Route Timeline - Desktop */
    .route-container {
        gap: 12px !important;
        height: 180px !important;
    }

    .confirmed-card .route-container {
        height: 114px !important;
    }

    .timeline-icon {
        width: 22px !important;
        height: 22px !important;
    }

    .timeline-line {
        width: 3px !important;
        /* min-height: 50px !important; */
    }
}

.bids-table {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    align-items: stretch !important;
}

    .bids-table .bid-row,
    .bids-table .bid-row.header {
        display: contents !important;
    }

    .bids-table > * {
        /* Ensure each header span / bid-cell uses full column box */
        box-sizing: border-box !important;
    }

    .bids-table .bid-row.header span,
    .bids-table .bid-cell {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 8px !important;
        min-height: 64px !important;
        text-align: center !important;
    }

    .bids-table .bid-row.header span {
        font-weight: 600 !important;
        color: var(--text-muted, #667085) !important;
    }

    .bids-table .bid-amount {
        margin-bottom: 8px !important;
        font-weight: 700 !important;
    }

    /* Vertical separators between columns: target 2nd and 3rd column grid cells */
    .bids-table > :nth-child(3n + 2),
    .bids-table > :nth-child(3n + 3) {
        border-left: 1px solid var(--border, #e4e7ec) !important;
    }

    /* Remove left border for first column and tidy last column */
    .bids-table > :nth-child(3n + 1) {
        border-left: none !important;
    }

    /* If a cell contains the placeholder --, keep it vertically centered and muted */
    .bids-table .bid-cell:empty,
    .bids-table .bid-cell:has(.bid-amount:empty) {
        color: var(--text-muted, #9ca3af) !important;
    }

/* Medium/smaller screens keep same grid but slightly reduced min-height */
@media screen and (max-width: 1024px) {
    .bids-table .bid-row.header span,
    .bids-table .bid-cell {
        min-height: 56px !important;
        padding: 10px 6px !important;
    }
}

.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

/* Collapse desktop nav into hamburger at wider breakpoint (<= 1200px)
   This ensures the header switches to mobile navigation for narrower layouts
   so the following items appear in the hamburger: Dashboard, Load Posts,
   Verifications, Tracking, Check Challan, More */
@media screen and (max-width: 1200px) {
    /* hide desktop nav */
    nav {
        display: none !important;
    }

    /* show hamburger button */
    .mobile-menu-btn {
        display: flex !important;
        order: -1 !important;
        margin-right: 16px !important;
    }

    /* keep logo and user actions aligned */
    .logo {
        order: 0 !important;
        margin-right: auto !important;
    }
}

/* Hide the filter toggle on desktop screens (we keep it available on mobile/tablet) */
@media (min-width: 1025px) {
    #filterModalToggle {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* Strong mobile-specific final override to ensure alignment across all rules */
@media (max-width: 600px) {
    /* enforce grid with fixed weight column */
    .multiple-stops-columns .stop-row,
    .multiple-stops-columns .stop-row.additional-row {
        display: grid !important;
        grid-template-columns: 1fr 96px !important;
        gap: 8px !important;
        align-items: center !important;
        padding-right: 0 !important;
    }

    /* weight group sizing and relative positioning for absolute child */
    .multiple-stops-columns .stop-weight-group,
    .stop-row .stop-weight-group {
        flex: 0 0 96px !important;
        max-width: 96px !important;
        width: 96px !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

        /* ensure input leaves room for delete icon */
        .multiple-stops-columns .stop-weight-group input,
        .stop-row .stop-weight-group input {
            padding-right: 12px !important;
            height: 42px !important;
            box-sizing: border-box !important;
        }

        /* precise delete button placement - moved outside the weight input */
        .multiple-stops-columns .stop-weight-group .delete-row-btn,
        .stop-row .stop-weight-group .delete-row-btn,
        .stop-weight-group .delete-row-btn,
        .stop-delete-wrapper .delete-row-btn {
            /* remove absolute placement; align in flow and add margin */
            margin-left: 12px !important;
            width: 36px !important;
            height: 36px !important;
            padding: 0 !important;
            background: transparent !important;
            border-radius: 50% !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            z-index: 20 !important;
        }

    /* icon color and hover */
    .delete-row-btn i,
    .delete-row-btn img {
        font-size: 18px !important;
        width: 18px !important;
        height: 18px !important;
        color: #f74437 !important;
    }

    .delete-row-btn:hover {
        background-color: transparent !important;
        box-shadow: none !important;
    }
}

/* Mobile-specific fixes: ensure multiple-stops rows and delete button align consistently */
@media (max-width: 600px) {
    .multiple-stops-columns .stop-row,
    .multiple-stops-columns .stop-row.additional-row {
        display: grid !important;
        grid-template-columns: 1fr 96px !important;
        /* input + weight (widened) */
        gap: 10px !important;
        align-items: center !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    .multiple-stops-columns .stop-weight-group {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding-left: 0 !important;
    }

        .multiple-stops-columns .stop-weight-group input {
            padding-right: 48px !important;
            /* room for absolute button */
            height: 42px !important;
            box-sizing: border-box !important;
        }

        .multiple-stops-columns .stop-weight-group .delete-row-btn,
        .stop-weight-group .delete-row-btn {
            position: absolute !important;
            right: 6px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            width: 36px !important;
            height: 36px !important;
            padding: 0 !important;
            box-sizing: content-box !important;
            background-color: transparent !important;
        }

            .multiple-stops-columns .stop-weight-group .delete-row-btn:hover,
            .stop-weight-group .delete-row-btn:hover {
                transform: translateY(-50%) !important;
                /* keep centered */
                box-shadow: none !important;
                background-color: transparent !important;
            }

    .multiple-stops-columns .stop-row input,
    .multiple-stops-columns .stop-row .stop-input-group input {
        height: 42px !important;
        box-sizing: border-box !important;
    }
}

.hamburger-line {
    display: block;
    width: 20px;
    height: 2px;
    background-color: #519e8a;
    /* Updated hamburger line color */
    border-radius: 2px;
    margin: 2px 0;
    transition: all 0.3s ease;
}

.mobile-menu-btn.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
}

.mobile-menu-btn.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
}

/* ============================================================
   MOBILE NAVIGATION OVERLAY
   ============================================================ */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1002;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

    .mobile-nav-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

/* Make schedule date/time non-bold while preserving semantics */
.schedule-info strong,
.schedule-info b {
    font-weight: 400 !important;
    font-weight: normal !important;
}

    /* If schedule is wrapped in other containers, ensure strong doesn't inherit heavier weight */
    .schedule-info strong *,
    .schedule-info b * {
        font-weight: 400 !important;
    }

/* ============================================================
   MOBILE NAVIGATION DRAWER
   ============================================================ */
.mobile-nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100%;
    background-color: #ffffff;
    z-index: 1003;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    visibility: hidden;
}

    .mobile-nav-drawer.active {
        transform: translateX(0);
        visibility: visible;
    }

.mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e4e7ec;
    min-height: 60px;
    flex-shrink: 0;
}

.mobile-nav-logo img {
    width: 60px;
    height: auto;
}

.mobile-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #efeff1;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

    .mobile-nav-close:hover {
        background: #e4e7ec;
    }

.mobile-nav-list {
    list-style: none;
    padding: 8px 0;
    margin: 0;
    flex: 1;
    overflow-y: auto;
}

    .mobile-nav-list > li {
        border-bottom: 1px solid #f0f0f0;
    }

        .mobile-nav-list > li:last-child {
            border-bottom: none;
        }

        .mobile-nav-list > li > a {
            display: flex;
            align-items: center;
            padding: 16px 20px;
            font-family: "Inter", sans-serif;
            font-size: 15px;
            font-weight: 500;
            color: #3c4044;
            text-decoration: none;
            transition: all 0.2s ease;
            cursor: pointer;
        }

            .mobile-nav-list > li > a .nav-icon {
                width: 20px;
                margin-right: 14px;
                color: #757d85;
                font-size: 16px;
                text-align: center;
            }

            .mobile-nav-list > li > a span {
                flex: 1;
            }

            .mobile-nav-list > li > a .submenu-arrow {
                font-size: 12px;
                color: #757d85;
                transition: transform 0.2s ease;
            }

        .mobile-nav-list > li.open > a .submenu-arrow {
            transform: rotate(180deg);
        }

        .mobile-nav-list > li > a:hover {
            color: #519e8a;
            background-color: #f9fafb;
        }

            .mobile-nav-list > li > a:hover .nav-icon {
                color: #519e8a;
            }

        .mobile-nav-list > li > a.active {
            color: #519e8a;
            font-weight: 600;
            background-color: rgba(81, 158, 138, 0.08);
            border-left: 3px solid #519e8a;
        }

            .mobile-nav-list > li > a.active .nav-icon {
                color: #519e8a;
            }

/* Mobile Submenu */
.mobile-submenu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fafbfc;
}

.mobile-nav-list > li.open .mobile-submenu {
    display: block;
}

.mobile-submenu li {
    border-bottom: 1px solid #f0f0f0;
}

    .mobile-submenu li:last-child {
        border-bottom: none;
    }

    .mobile-submenu li a {
        display: block;
        padding: 12px 20px 12px 54px;
        font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: 400;
        color: #757d85;
        text-decoration: none;
        transition: all 0.2s ease;
        border-left: 3px solid transparent;
    }

        .mobile-submenu li a:hover {
            color: #519e8a;
            background-color: #f5f6f8;
            border-left-color: #519e8a;
        }

.mobile-nav-footer {
    padding: 16px 20px;
    border-top: 1px solid #e4e7ec;
    flex-shrink: 0;
}

.mobile-demo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 2px;
    background: rgba(81, 158, 138, 0.1);
    color: #519e8a;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 100px;
    border: 1px solid rgba(81, 158, 138, 0.2);
    transition: all 0.2s ease;
    cursor: pointer;
}

    .mobile-demo-btn:hover {
        background: rgba(81, 158, 138, 0.15);
        border-color: rgba(81, 158, 138, 0.3);
    }

.mobile-call-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    background: #519e8a;
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 100px;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

    .mobile-call-btn:hover {
        background: #3d7f6e;
    }

/* ============================================================
   MOBILE BOTTOM NAVIGATION
   ============================================================ */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: #ffffff;
    border-top: 1px solid #e4e7ec;
    z-index: 999;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.mobile-bottom-nav-list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
}

    .mobile-bottom-nav-list li {
        flex: 1;
        display: flex;
        justify-content: center;
    }

.mobile-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
    color: #667085;
    font-size: 10px;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    padding: 8px 4px;
    transition: color 0.2s ease;
    width: 100%;
    cursor: pointer;
}

    .mobile-bottom-nav-item i {
        font-size: 20px;
    }

    .mobile-bottom-nav-item.active {
        color: #519e8a;
    }

    .mobile-bottom-nav-item:hover {
        color: #519e8a;
    }

/* ============================================================
   TABLET STYLES (768px - 1024px)
   ============================================================ */
@media screen and (max-width: 1024px) {
    /* Fix scrolling issue */
    html {
        overflow-x: hidden;
        overflow-y: auto !important;
        height: auto !important;
    }

    body {
        overflow-x: hidden;
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100vh;
    }

    /* Header Layout - Tablet */
    header {
        justify-content: space-between !important;
        padding: 12px 20px !important;
        height: 70px !important;
    }

    /* Hide Desktop Nav */
    nav {
        display: none !important;
    }

    /* Show and Position Hamburger */
    .mobile-menu-btn {
        display: flex !important;
        order: -1 !important;
        margin-right: 16px !important;
    }

    .logo {
        order: 0 !important;
        margin-right: auto !important;
        /* Pushes user actions to the right */
    }

        .logo img {
            width: 65px !important;
            height: auto !important;
        }

    /* User Actions Container */
    .user-actions {
        gap: 12px !important;
        min-width: auto !important;
        justify-content: flex-end !important;
    }

    /* Tablet User Actions Items Order: 
       1. Notification
       2. Demo
       3. Post Load
       4. User Avatar
    */

    /* Mobile override: force filter grid to a single column on very small screens (320px) */
    @media (max-width: 320px) {
        .filter-grid {
            grid-template-columns: 1fr !important;
            gap: 10px !important;
            row-gap: 10px !important;
            column-gap: 10px !important;
        }

            /* Ensure any element intended to span full width does so on tiny screens */
            .filter-grid .span-full,
            .form-group.span-full {
                grid-column: 1 / -1 !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }

            /* Make inputs and custom selects full width inside the grid on mobile */
            .filter-grid .select-trigger,
            .filter-grid input,
            .filter-grid .input-wrapper,
            .filter-grid .custom-select {
                width: 100% !important;
                box-sizing: border-box !important;
            }
    }

    .notification-icon {
        display: flex !important;
        order: 1 !important;
        width: 36px !important;
        height: 36px !important;
        margin-right: 4px !important;
    }

    .demo-button {
        display: flex !important;
        order: 2 !important;
    }

    .post-load-button {
        display: flex !important;
        order: 3 !important;
        min-width: 110px !important;
        font-size: 12px !important;
        padding: 0px 14px !important;
        height: 36px !important;
    }

    .user-profile {
        display: flex !important;
        order: 4 !important;
        margin-left: 4px !important;
    }

    .user-avatar {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }

    /* Main Content */
    main {
        margin-top: 70px !important;
        min-height: calc(100vh - 70px) !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Load Posts Page */
    .load-posts-page {
        padding: 16px !important;
        margin-top: 70px !important;
        flex-direction: column !important;
        gap: 16px !important;
        min-height: calc(100vh - 70px) !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Hide Filter Sidebar */
    /* Filter sidebar hidden by default on mobile, shown via .mobile-open class */
    .filter-sidebar,
    .filter-sidebar.mobile-open {
        display: none !important;
    }

    .filter-icon {
        display: flex !important;
        cursor: pointer;
    }

    .main-load-content {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Tabs and Search */
    .tabs-and-search-container {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
        height: auto !important;
        margin-bottom: 16px !important;
        flex-wrap: wrap !important;
    }

    .tabs {
        overflow-x: auto !important;
        gap: 16px !important;
        /* padding-bottom: 4px !important; */
    }

    .tab-button {
        font-size: 13px !important;
        padding: 10px 0 !important;
        white-space: nowrap !important;
    }

    .search-and-actions {
        min-width: unset !important;
        gap: 12px !important;
    }

    .search-bar {
        width: 250px !important;
    }

    /* Load Post Cards */
    .load-posts-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        padding-bottom: 20px !important;
    }

    .load-post-wrapper {
        margin-bottom: 0 !important;
    }

    /* Post Header */
    .post-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    .post-meta {
        font-size: 12px !important;
        padding: 12px 16px !important;
        background: #ffffff !important;
        border-radius: 12px 12px 0 0 !important;
        /* border: 1px solid #e4e7ec !important; */
        border-bottom: none !important;
    }

    .card-actions-overflow,
    .card-actions-overflow-confirmed {
        display: none !important;
    }

    .post-header {
        position: relative !important;
    }

    .mobile-kebab-menu,
    .mobile-confirmed-kebab-menu {
        display: flex !important;
        position: absolute !important;
        top: 5px !important;
        right: 16px !important;
        width: 30px !important;
        height: 30px !important;
        /* Ensure equal spacing for L1/L2/L3 on tablet and mobile */
        @media screen and (max-width: 1024px) {
            .bids-table {
                display: block !important;
                width: 100% !important;
                padding: 0 !important;
            }

                .bids-table .bid-row.header,
                .bids-table .bid-row {
                    display: grid !important;
                    grid-template-columns: repeat(3, 1fr) !important;
                    width: 100% !important;
                    gap: 0 !important;
                    align-items: start !important;
                }

                    .bids-table .bid-row.header span,
                    .bids-table .bid-row .bid-cell {
                        text-align: center !important;
                        justify-self: center !important;
                    }

                    .bids-table .bid-row.header span {
                        border-right: 1px solid #e4e7ec !important;
                    }

                        .bids-table .bid-row.header span:last-child,
                        .bids-table .bid-row .bid-cell:last-child {
                            border-right: none !important;
                        }

            /* CSS fallback to hide arrow glyph if it was injected via ::after */
            .accept-bid-button-inline::after {
                display: none !important;
                content: none !important;
            }
        }

        @media screen and (max-width: 767px) {
            /* same rules for smaller mobiles to be explicit */
            .bids-table {
                display: block !important;
                width: 100% !important;
                padding: 0 !important;
            }

                .bids-table .bid-row.header,
                .bids-table .bid-row {
                    display: grid !important;
                    grid-template-columns: repeat(3, 1fr) !important;
                    width: 100% !important;
                    gap: 0 !important;
                    align-items: start !important;
                }

                    .bids-table .bid-row.header span,
                    .bids-table .bid-row .bid-cell {
                        text-align: center !important;
                        justify-self: center !important;
                    }

            .accept-bid-button-inline::after {
                display: none !important;
                content: none !important;
            }
        }

        justify-content: center !important;
        align-items: center !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        cursor: pointer !important;
        z-index: 10 !important;
    }

        .mobile-kebab-menu i {
            font-size: 18px !important;
            color: #667085 !important;
        }

    .action-button {
        flex: 1 !important;
        min-width: 100px !important;
        font-size: 11px !important;
        padding: 10px 8px !important;
        justify-content: center !important;
        border-radius: 0 !important;
        height: 42px !important;
        border-right: 1px solid #e4e7ec !important;
    }

        .action-button:last-child {
            border-right: none !important;
        }

        .action-button img {
            width: 16px !important;
            height: 16px !important;
        }

    /* Card Body */
    .load-post-card {
        border-radius: 0 0 12px 12px !important;
    }

    /* Desktop: fixed height for load post card */
    @media (min-width: 1024px) {
        .load-post-card {
            height: 342px !important;
        }
    }

    .card-body {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
    }

    /* Location Section */
    .location-section {
        padding: 16px !important;
        border-bottom: 1px solid #e4e7ec !important;
        border-right: none !important;
        height: auto !important;
    }

    .post-id-row {
        margin: 0 !important;
        padding: 0 0 12px 0 !important;
        margin-bottom: 12px !important;
        border-bottom: 1px solid #e4e7ec !important;
    }

    .location-path {
        margin-top: 0 !important;
        padding-left: 30px !important;
        gap: 0 !important;
    }

    .location-line,
    .location-line-end {
        position: relative !important;
        padding-left: 0 !important;
        height: auto !important;
        min-height: auto !important;
        gap: 10px !important;
    }

        .location-line .location-dot,
        .location-line-end .location-dot {
            position: absolute !important;
            left: -29px !important;
            top: 0 !important;
            width: 22px !important;
            height: 22px !important;
            z-index: 2 !important;
        }

    .location-connector {
        display: block !important;
        position: absolute !important;
        left: 11px !important;
        top: 22px !important;
        width: 2px !important;
        height: calc(100% - 44px) !important;
        background: #519e8a !important;
        z-index: 1 !important;
    }

    .location-info {
        gap: 2px !important;
    }

    .location-label {
        font-size: 12px !important;
        color: #667085 !important;
    }

    .location-text {
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #101828 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    .distance-info {
        display: block !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        margin: 12px 0 !important;
        font-size: 13px !important;
        color: #667085 !important;
        background: transparent !important;
        padding: 0 !important;
    }

    /* New Route Timeline - Tablet */
    .route-container {
        gap: 10px !important;
    }

    .timeline-visual {
        padding-top: 2px !important;
    }

    .timeline-icon {
        width: 20px !important;
        height: 20px !important;
    }

    .timeline-line {
        width: 2px !important;
        min-height: 35px !important;
    }

    .route-location-block .route-label {
        font-size: 11px !important;
    }

    .route-location-block .route-address-text {
        font-size: 13px !important;
    }

    .route-distance-info {
        padding: 10px 0 !important;
        font-size: 12px !important;
    }

    .schedule-info {
        display: block !important;
        margin-top: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: 16px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-top: 1px solid #e4e7ec !important;
        font-size: 14px !important;
        color: #101828 !important;
    }

    /* Make schedule timestamps wrap instead of truncating with ellipsis */
    .schedule-info {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: break-word !important;
        hyphens: auto !important;
    }

    /* Details Section */
    .details-section {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 14px 24px !important;
        padding: 16px !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid #e4e7ec !important;
        height: auto !important;
    }

    .detail-item {
        flex-direction: column !important;
        gap: 4px !important;
    }

        .detail-item .label {
            font-size: 12px !important;
            color: #667085 !important;
            width: auto !important;
            max-width: none !important;
            font-weight: 400 !important;
        }

        .detail-item .value {
            font-size: 14px !important;
            font-weight: 600 !important;
            margin-top: 0 !important;
        }

    /* Bidding Section */
    .bidding-section {
        width: 100% !important;
        min-height: auto !important;
        padding: 0 !important;
    }

    .bidding-header {
        padding: 12px 16px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .bidding-time-info {
        width: auto !important;
        flex: 1 !important;
        font-size: 13px !important;
    }

    .extend-time-button {
        margin-left: auto !important;
        font-size: 11px !important;
        padding: 6px 12px !important;
        height: 28px !important;
    }

    /* Bids Table */

    .bid-row {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .bid-cell {
        padding: 14px 10px !important;
    }

    .bid-amount {
        font-size: 15px !important;
        margin-bottom: 10px !important;
    }

    .accept-bid-button-inline {
        font-size: 11px !important;
        padding: 6px 12px !important;
        width: 90px !important;
    }

    .bidding-summary-row {
        padding: 12px 16px !important;
        margin-top: 0 !important;
    }

    .bid-actions {
        border-radius: 0 !important;
        margin-top: 0 !important;
    }

        .bid-actions span {
            font-size: 11px !important;
            padding: 10px 8px !important;
            min-height: 42px !important;
        }

    /* Description */
    .description-section {
        padding: 14px 16px !important;
        font-size: 13px !important;
    }

    /* Confirmed Posts */
    .card-actions-overflow-confirmed {
        width: 100% !important;
        overflow-x: auto !important;
        border-radius: 0 !important;
    }

    .confirmed-action-btn {
        min-width: 110px !important;
        font-size: 11px !important;
        padding: 10px 14px !important;
    }

    .card-body-confirmed {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
    }

    .confirmed-details-section,
    .confirmed-info-section {
        display: grid !important;
        gap: 14px 24px !important;
        padding: 16px !important;
        border-left: none !important;
        border-right: none !important;
        height: auto !important;
    }

        .confirmed-info-section .detail-item {
            flex-direction: column !important;
            gap: 4px !important;
        }

            .confirmed-info-section .detail-item .label {
                width: auto !important;
                font-size: 12px !important;
                color: #667085 !important;
            }

            .confirmed-info-section .detail-item .value {
                width: auto !important;
                font-size: 14px !important;
            }

    /* Empty State */
    .no-load-posts {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 300px !important;
        height: auto !important;
        margin: 50px auto 30px auto !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

        .no-load-posts img {
            width: 140px !important;
            height: auto !important;
        }

        .no-load-posts h1 {
            font-size: 22px !important;
            line-height: 1.4 !important;
            margin-top: 10px !important;
        }

    .create-load-post-button {
        margin-top: 16px !important;
        min-width: 200px !important;
    }

    .separator {
        position: relative !important;
        width: 85% !important;
        left: auto !important;
        top: auto !important;
        margin: 30px auto !important;
    }

    .what-else-can-do {
        position: relative !important;
        width: 100% !important;
        max-width: 650px !important;
        left: auto !important;
        top: auto !important;
        height: auto !important;
        padding: 0 24px !important;
        margin: 0 auto 50px auto !important;
        box-sizing: border-box !important;
    }

        .what-else-can-do h2 {
            position: relative !important;
            width: 100% !important;
            left: auto !important;
            top: auto !important;
            font-size: 17px !important;
            margin-bottom: 20px !important;
            text-align: center !important;
        }

    .buttons-grid {
        position: relative !important;
        width: 100% !important;
        left: auto !important;
        top: auto !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        height: auto !important;
    }

        .buttons-grid button {
            width: auto !important;
            min-width: 170px !important;
            max-width: 200px !important;
            font-size: 13px !important;
            height: 40px !important;
            padding: 10px 20px 10px 14px !important;
        }

    /* Modals */

    .modal-content {
        max-width: 90% !important;
        width: 600px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }

    .filter-modal-content {
        width: 90vw !important;
        max-width: 600px !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }

    .filter-form-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }
}

/* ============================================================
   MOBILE STYLES (max-width: 767px)
   ============================================================ */
@media screen and (max-width: 767px) {
    /* Fix scrolling issue */
    html {
        overflow-x: hidden;
        overflow-y: auto !important;
        height: auto !important;
    }

    body {
        overflow-x: hidden;
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100vh;
        padding-bottom: 64px;
    }

    /* Header Layout - Mobile */
    header {
        padding: 10px 16px !important;
        height: 60px !important;
        justify-content: space-between !important;
    }

    .logo img {
        width: 55px !important;
        height: auto !important;
    }

    /* Show Mobile Elements */
    .mobile-menu-btn {
        display: flex !important;
        order: -1 !important;
        margin-right: 12px !important;
    }

    .logo {
        order: 0 !important;
        margin-right: auto !important;
        /* Pushes user actions to the right */
    }

    /* Mobile nav now uses visibility transitions, no display override needed */

    /* Hide Mobile Bottom Nav - Navigation is via hamburger menu only */
    .mobile-bottom-nav {
        display: none !important;
    }

    /* Hide Desktop Nav */
    nav {
        display: none !important;
    }

    .user-actions {
        gap: 8px !important;
        /* Reduced gap for mobile */
        min-width: auto !important;
        justify-content: flex-end !important;
    }

    /* Mobile User Actions Order:
       1. Notification
       2. Post Load
       Hide others
    */
    .notification-icon {
        display: flex !important;
        order: 1 !important;
    }

    .post-load-button {
        display: flex !important;
        order: 2 !important;
        min-width: auto !important;
        font-size: 11px !important;
        padding: 2px 10px !important;
        height: 32px !important;
        gap: 4px !important;
    }

    .demo-button {
        display: none !important;
    }

    .user-profile {
        display: none !important;
    }

    .post-load-button i {
        font-size: 11px !important;
    }

    .notification-icon {
        width: 32px !important;
        height: 32px !important;
        padding: 6px !important;
    }

        .notification-icon .bell-icon {
            width: 20px !important;
            height: 20px !important;
        }

    .notification-count {
        width: 14px !important;
        height: 14px !important;
        font-size: 9px !important;
        top: -2px !important;
        right: 2px !important;
    }

    .user-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }

    .user-profile i {
        font-size: 10px !important;
        margin-left: 2px !important;
    }

    /* Main Content */
    main {
        margin-top: 60px !important;
        min-height: calc(100vh - 124px) !important;
        padding-bottom: 64px !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Load Posts Page */
    .load-posts-page {
        padding: 12px !important;
        margin-top: 60px !important;
        flex-direction: column !important;
        gap: 12px !important;
        min-height: calc(100vh - 124px) !important;
        padding-bottom: 80px !important;
        height: auto !important;
        overflow: visible !important;
    }

    .filter-sidebar {
        display: none !important;
    }

    .filter-icon {
        display: flex !important;
        width: 34px !important;
        height: 34px !important;
    }

    .main-load-content {
        width: 100% !important;
        /* gap: 12px !important; */
        height: auto !important;
        overflow: visible !important;
    }

    /* Tabs and Search */
    .tabs-and-search-container {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        height: auto !important;
        margin-bottom: 0px !important;
    }

    .tabs {
        width: 100% !important;
        overflow-x: auto !important;
        gap: 12px !important;
        /* padding-bottom: 8px !important; */
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .tab-button {
        font-size: 12px !important;
        padding: 8px 4px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .search-and-actions {
        width: 100% !important;
        min-width: unset !important;
        gap: 10px !important;
    }

    .search-bar {
        flex: 1 !important;
        width: 100% !important;
        max-width: none !important;
        height: 38px !important;
    }

        .search-bar input {
            font-size: 13px !important;
            padding-left: 12px !important;
        }

    .excel-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        padding: 6px !important;
    }

        .excel-icon img {
            width: 20px !important;
            height: 20px !important;
        }

    /* Load Post Cards */
    .load-posts-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        padding-right: 0 !important;
        padding-bottom: 20px !important;
    }

    .load-post-wrapper {
        margin-bottom: 0 !important;
    }

    /* Post Header */
    .post-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    .post-meta {
        font-size: 11px !important;
        padding: 10px 14px !important;
        background: #f9fafb !important;
        border-radius: 12px 12px 0 0 !important;
        border: 1px solid #e4e7ec !important;
        border-bottom: none !important;
    }

    .card-actions-overflow {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        width: 100% !important;
        border-radius: 0 !important;
        border: 1px solid #e4e7ec !important;
        border-top: none !important;
        border-bottom: none !important;
        padding: 0 !important;
        gap: 0 !important;
        background: #fff !important;
    }

    .action-button {
        flex: unset !important;
        width: 100% !important;
        font-size: 11px !important;
        padding: 10px 8px !important;
        justify-content: center !important;
        border-radius: 0 !important;
        border-right: 1px solid #e4e7ec !important;
        border-bottom: 1px solid #e4e7ec !important;
        height: auto !important;
        gap: 4px !important;
    }

        .action-button:nth-child(2n) {
            border-right: none !important;
        }

        .action-button:nth-child(n + 3) {
            border-bottom: none !important;
        }

        .action-button img {
            width: 14px !important;
            height: 14px !important;
        }

    /* Card Body */
    .load-post-card {
        border-radius: 0 0 12px 12px !important;
    }

    .card-body {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
    }

    /* Location Section */
    .location-section {
        padding: 16px !important;
        border-bottom: 1px solid #e4e7ec !important;
        border-right: none !important;
        height: auto !important;
    }

    .post-id-row {
        margin: 0 !important;
        padding: 0 0 12px 0 !important;
        margin-bottom: 12px !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
        border-bottom: 1px solid #e4e7ec !important;
    }

    .post-id-badge {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #101828 !important;
    }

    .open-status {
        font-size: 11px !important;
        padding: 4px 12px !important;
        border-radius: 100px !important;
        background: rgba(81, 158, 138, 0.1) !important;
        color: #519e8a !important;
        font-weight: 500 !important;
    }

    .location-path {
        margin-top: 0 !important;
        padding-left: 30px !important;
        gap: 0 !important;
    }

    .location-line,
    .location-line-end {
        position: relative !important;
        padding-left: 0 !important;
        height: auto !important;
        min-height: auto !important;
        gap: 10px !important;
    }

        .location-line .location-dot,
        .location-line-end .location-dot {
            position: absolute !important;
            left: -29px !important;
            top: 0 !important;
            width: 22px !important;
            height: 22px !important;
            z-index: 2 !important;
        }

    .location-connector {
        display: block !important;
        position: absolute !important;
        left: 11px !important;
        top: 22px !important;
        width: 2px !important;
        height: calc(100% - 44px) !important;
        background: #519e8a !important;
        z-index: 1 !important;
    }

    .location-info {
        gap: 2px !important;
    }

    .location-label {
        font-size: 12px !important;
        color: #667085 !important;
    }

    .location-text {
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #101828 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    .distance-info {
        display: block !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        margin: 12px 0 !important;
        font-size: 13px !important;
        color: #667085 !important;
        background: transparent !important;
        padding: 0 !important;
    }

    .schedule-info {
        display: block !important;
        margin-top: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: 16px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-top: 1px solid #e4e7ec !important;
        font-size: 14px !important;
        color: #101828 !important;
    }

    /* Details Section */
    .details-section {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px 16px !important;
        padding: 14px !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid #e4e7ec !important;
        height: auto !important;
    }

    .detail-item {
        flex-direction: column !important;
        gap: 3px !important;
    }

        .detail-item .label {
            font-size: 11px !important;
            color: #667085 !important;
            width: auto !important;
            max-width: none !important;
            font-weight: 400 !important;
        }

        .detail-item .value {
            font-size: 13px !important;
            font-weight: 600 !important;
            margin-top: 0 !important;
        }

    /* Bidding Section */
    .bidding-section {
        width: 100% !important;
        min-height: auto !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    .bidding-header {
        padding: 10px 14px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .bidding-time-info {
        width: 100% !important;
        flex: 1 !important;
        font-size: 12px !important;
        gap: 4px !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
    }

        .bidding-time-info span {
            font-size: 12px !important;
        }

    .bidding-timer {
        font-size: 13px !important;
    }

    .extend-time-button {
        font-size: 10px !important;
        padding: 4px 10px !important;
        height: 24px !important;
        margin-left: auto !important;
    }

    /* Bids Table */
    .bids-table {
        padding: 0 !important;
    }

    .bid-row {
        grid-template-columns: repeat(3, 1fr) !important;
    }

        .bid-row.header span {
            font-size: 12px !important;
            padding: 10px 6px !important;
            height: auto !important;
        }

    .bid-cell {
        padding: 12px 8px !important;
    }

    .bid-amount {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }

    .accept-bid-button-inline {
        font-size: 10px !important;
        padding: 5px 10px !important;
        width: 80px !important;
    }

    .bidding-summary-row {
        padding: 10px 14px !important;
        margin-top: 0 !important;
        font-size: 12px !important;
    }

    .view-all-bids {
        font-size: 11px !important;
    }

    /* Bid Actions */
    .bid-actions {
        grid-template-columns: repeat(3, 1fr) !important;
        border-radius: 0 !important;
        margin-top: 0 !important;
    }

        .bid-actions span {
            font-size: 10px !important;
            padding: 10px 6px !important;
            min-height: 38px !important;
            gap: 4px !important;
        }

    /* Description */
    .description-section {
        padding: 12px 14px !important;
        font-size: 12px !important;
    }

    /* Confirmed Posts */
    .post-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    .card-actions-overflow-confirmed {
        display: none !important;
    }

    .mobile-confirmed-kebab-menu {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 8px;
        border-radius: 4px;
        transition: background-color 0.15s ease;
    }

        .mobile-confirmed-kebab-menu:hover {
            background-color: #f9fafb;
        }

        .mobile-confirmed-kebab-menu:active {
            background-color: #f2f4f7;
        }

    .confirmed-action-btn {
        font-size: 10px !important;
        padding: 10px 8px !important;
        border-bottom: 1px solid #e4e7ec !important;
        height: auto !important;
        justify-content: center !important;
        gap: 4px !important;
    }
}

.confirmed-action-btn:nth-child(2n) {
    border-right: none !important;
}

.confirmed-action-btn .icon img {
    width: 14px !important;
    height: 14px !important;
}

.load-post-card-confirmed-button {
    border-radius: 0 0 12px 12px !important;
}

.card-body-confirmed {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
}

.confirmed-details-section,
.confirmed-info-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    border-left: none !important;
    border-right: none !important;
    height: 200px !important;
    box-sizing: border-box !important;
}

/* Desktop/Tablet: 3-column layout for card-body-confirmed */
@media screen and (min-width: 768px) {
    /* Make location dots and connector follow mobile layout */
    .location-line .location-dot,
    .location-line-end .location-dot {
        position: absolute !important;
        left: -29px !important;
        top: 0 !important;
        width: 22px !important;
        height: 22px !important;
        z-index: 2 !important;
    }

    .location-connector {
        display: block !important;
        position: absolute !important;
        left: 11px !important;
        top: 22px !important;
        width: 2px !important;
        height: calc(100% - 44px) !important;
        background: #519e8a !important;
        z-index: 1 !important;
    }

    /* removed .location-line-end::after per request */

    /* Tablet: make ongoing posts use 3-column desktop layout like confirmed posts */
    .card-body {
        display: grid !important;
        grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax( 200px, 455px ) !important;
        gap: 0 !important;
    }

        .card-body .location-section {
            border-right: 1px solid #e4e7ec !important;
            padding-right: 16px !important;
        }

        .card-body .details-section {
            display: flex !important;
            flex-direction: column !important;
            gap: 10px 20px !important;
            padding: 20px 20px !important;
            border-left: 1px solid #e4e7ec !important;
            height: 292px;
        }

    .card-body-confirmed {
        display: grid !important;
        grid-template-columns: minmax(200px, 1fr) minmax(200px, 1.2fr) minmax( 200px, 1.2fr ) !important;
        gap: 0 !important;
    }

        .card-body-confirmed .location-section {
            border-right: 1px solid #e4e7ec !important;
            padding-right: 16px !important;
            height: 200px !important;
        }

        .card-body-confirmed .confirmed-details-section {
            display: flex !important;
            flex-direction: column !important;
            gap: 8px !important;
            padding: 12px 16px !important;
            border-left: 1px solid #e4e7ec !important;
            border-right: 1px solid #e4e7ec !important;
            height: 200px !important;
        }

        .card-body-confirmed .confirmed-info-section {
            display: flex !important;
            flex-direction: column !important;
            gap: 8px !important;
            padding: 12px 16px !important;
            border-left: none !important;
            height: 200px !important;
        }

        .card-body-confirmed .detail-item {
            flex-direction: row !important;
            gap: 8px !important;
        }

            .card-body-confirmed .detail-item .label {
                width: 110px !important;
                flex-shrink: 0 !important;
            }
}

/* Desktop: increase vertical gap for ongoing (non-confirmed) load post detail rows */
@media screen and (min-width: 1024px) {
    /* Target load-post cards that are NOT confirmed */
    .load-post-card:not(.confirmed-card) .details-section {
        gap: 22px 20px !important;
        /* row-gap: 22px; column-gap: 20px */
        padding-top: 24px !important;
        padding-left: 24px !important;
        padding-right: 20px !important;
    }

    .load-post-card:not(.confirmed-card) .detail-item {
        gap: 10px !important;
    }
}

.confirmed-details-section .detail-item,
.confirmed-info-section .detail-item {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    /* gap: 12px !important; */
    width: 100% !important;
}

    .confirmed-details-section .detail-item .label,
    .confirmed-info-section .detail-item .label {
        /* width: 120px !important; */
        flex-shrink: 0 !important;
        font-size: 13px !important;
        color: #667085 !important;
        margin-bottom: 0 !important;
    }

    .confirmed-details-section .detail-item .value,
    .confirmed-info-section .detail-item .value {
        width: auto !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-align: left !important;
    }

.check-time-link.no-date {
    width: auto !important;
    padding: 5px 12px !important;
    font-size: 10px !important;
}

/* Modals */

.modal-content {
    width: 100% !important;
    margin: 10px !important;
    border-radius: 16px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
}

.modal-header h2 {
    font-size: 16px !important;
}

.close-button {
    font-size: 22px !important;
    width: 28px !important;
    height: 28px !important;
}

.modal-footer {
    gap: 10px !important;
    padding-top: 16px !important;
}

/* Filter Modal */
.filter-modal-content {
    width: 95vw !important;
    height: auto !important;
    max-height: 85vh !important;
    padding: 16px !important;
    border-radius: 16px !important;
    overflow-y: auto !important;
}

.filter-modal-header h3 {
    font-size: 16px !important;
}

.filter-form-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
}

.filter-form-group {
    width: 100% !important;
    height: auto !important;
}

    .filter-form-group label {
        font-size: 13px !important;
    }

    .filter-form-group input,
    .filter-form-group select {
        height: 42px !important;
        font-size: 13px !important;
    }

.filter-actions {
    flex-direction: column-reverse !important;
    gap: 10px !important;
}

.filter-clear-btn,
.filter-apply-btn {
    width: 100% !important;
    height: 42px !important;
}

/* Notification Modal - Tablet size */
.notification-modal {
    position: fixed !important;
    top: 60px !important;
    right: 10px !important;
    left: auto !important;
    width: 420px !important;
    max-width: calc(100vw - 20px) !important;
    height: auto !important;
    max-height: calc(100vh - 80px) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15) !important;
    display: none !important;
}

    .notification-modal[style*="display: flex"],
    .notification-modal[style*="display: block"] {
        display: flex !important;
        flex-direction: column !important;
    }

    .notification-modal .modal-body {
        flex: 1 !important;
        max-height: calc(100vh - 140px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

/* Profile Dropdown */
.profile-dropdown {
    position: fixed !important;
    top: 60px !important;
    right: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: 300px !important;
    border-radius: 12px !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 124px) !important;
}

/* Empty State */
.no-load-posts {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 260px !important;
    height: auto !important;
    margin: 30px auto 20px auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

    .no-load-posts img {
        width: 110px !important;
        height: auto !important;
    }

    .no-load-posts h1 {
        font-size: 18px !important;
        line-height: 1.3 !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 8px !important;
    }

.create-load-post-button {
    width: auto !important;
    min-width: 180px !important;
    max-width: 220px !important;
    font-size: 14px !important;
    padding: 10px 20px !important;
    height: 42px !important;
    margin-top: 14px !important;
}

.separator {
    width: 90% !important;
    left: auto !important;
    position: relative !important;
    margin: 20px auto !important;
}

.what-else-can-do {
    width: 100% !important;
    max-width: 320px !important;
    left: auto !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    position: relative !important;
    height: auto !important;
    margin: 0 auto 30px auto !important;
}

    .what-else-can-do h2 {
        position: relative !important;
        width: 100% !important;
        left: auto !important;
        font-size: 15px !important;
        margin-bottom: 14px !important;
        text-align: center !important;
    }

.buttons-grid {
    position: relative !important;
    width: 100% !important;
    left: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    height: auto !important;
}

    .buttons-grid button {
        width: 100% !important;
        min-width: unset !important;
        max-width: unset !important;
        font-size: 11px !important;
        padding: 8px 12px 8px 8px !important;
        height: 36px !important;
        justify-content: flex-start !important;
        gap: 4px !important;
    }

        .buttons-grid button img {
            width: 14px !important;
            height: 14px !important;
            margin-right: 2px !important;
        }

        .buttons-grid button::before {
            display: none !important;
        }

/* ============================================================
   SMALL MOBILE (max-width: 375px)
   ============================================================ */
@media screen and (max-width: 375px) {
    header {
        padding: 8px 12px !important;
        height: 56px !important;
    }

    .logo img {
        width: 48px !important;
    }

    .post-load-button {
        font-size: 10px !important;
        padding: 5px 8px !important;
        height: 28px !important;
    }

    .load-posts-page {
        padding: 10px !important;
        margin-top: 56px !important;
    }

    .tab-button {
        font-size: 11px !important;
        padding: 6px 2px !important;
    }

    .search-bar {
        height: 34px !important;
    }

    .post-meta {
        font-size: 10px !important;
        padding: 8px 12px !important;
    }

    .action-button {
        font-size: 10px !important;
        padding: 8px 6px !important;
    }

    .location-section {
        padding: 12px !important;
    }

    .post-id-badge {
        font-size: 12px !important;
    }

    .location-label {
        font-size: 10px !important;
    }

    .location-text {
        font-size: 12px !important;
    }

    .details-section {
        padding: 12px !important;
        gap: 10px 14px !important;
    }

    .detail-item .label {
        font-size: 10px !important;
    }

    .detail-item .value {
        font-size: 12px !important;
    }

    .bidding-header {
        padding: 8px 12px !important;
    }

    .bidding-time-info span {
        font-size: 11px !important;
    }

    .bid-cell {
        padding: 10px 6px !important;
    }

    .bid-amount {
        font-size: 13px !important;
    }

    .accept-bid-button-inline {
        font-size: 9px !important;
        padding: 4px 8px !important;
        width: 72px !important;
    }

    .bid-actions span {
        font-size: 9px !important;
        padding: 8px 4px !important;
    }

    .description-section {
        padding: 10px 12px !important;
        font-size: 11px !important;
    }

    .confirmed-action-btn {
        font-size: 9px !important;
        padding: 8px 6px !important;
    }

    .no-load-posts {
        max-width: 260px !important;
        margin: 30px auto !important;
    }

        .no-load-posts img {
            width: 100px !important;
        }

        .no-load-posts h1 {
            font-size: 16px !important;
            line-height: 24px !important;
        }

    .create-load-post-button {
        max-width: 200px !important;
        font-size: 13px !important;
        height: 40px !important;
    }
}

/* ============================================================
   CREATE LOAD REQUEST MODAL - RESPONSIVE STYLES
   ============================================================ */

/* Tablet (768px - 1024px) */
@media screen and (max-width: 1024px) {
    #modalOverlay .modal-content {
        max-width: 95vw !important;
        width: 700px !important;
        padding: 20px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }

    #modalOverlay .modal-header h2 {
        font-size: 17px !important;
    }

    #modalOverlay .form-row {
        flex-direction: column !important;
        gap: 16px !important;
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }

    #modalOverlay .form-group {
        width: 100% !important;
        flex: unset !important;
    }

    #modalOverlay .form-section {
        width: 100% !important;
    }

    #modalOverlay .toggle-buttons {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    #modalOverlay .toggle-button {
        padding: 8px 14px !important;
        font-size: 13px !important;
        min-width: auto !important;
        flex: 0 0 auto !important;
        margin-right: 0 !important;
    }

    #modalOverlay .time-selects {
        flex-direction: row !important;
        gap: 12px !important;
    }

        #modalOverlay .time-selects .custom-dropdown {
            flex: 1 !important;
            min-width: 100px !important;
        }

    #modalOverlay .dropdown-header {
        font-size: 14px !important;
        height: 42px !important;
    }

    #modalOverlay .form-group input,
    #modalOverlay .form-group select,
    #modalOverlay .form-group textarea {
        height: 42px !important;
        font-size: 14px !important;
    }

    #modalOverlay .checkbox-group label {
        font-size: 12px !important;
    }

    #modalOverlay .modal-footer {
        flex-direction: row !important;
        gap: 12px !important;
        padding-top: 20px !important;
    }

    #modalOverlay .cancel-button,
    #modalOverlay .create-button {
        width: auto !important;
        min-width: 120px !important;
    }

    /* Multiple Stops Fields */
    #modalOverlay .loading-points-container {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

        #modalOverlay .loading-points-container .form-group {
            flex: 1 1 calc(50% - 8px) !important;
            min-width: 180px !important;
        }

    #modalOverlay .add-more-address-button {
        font-size: 12px !important;
        padding: 8px 14px !important;
    }

    /* Material and Truck rows */
    #modalOverlay .material-row,
    #modalOverlay .truck-row {
        flex-direction: column !important;
    }

        #modalOverlay .material-row .material-field,
        #modalOverlay .material-row .weight-value-field,
        #modalOverlay .truck-row .truck-field,
        #modalOverlay .truck-row .payment-field {
            flex: unset !important;
            width: 100% !important;
        }
}

/* Mobile (max-width: 767px) */
@media screen and (max-width: 767px) {
    #modalOverlay .modal-content {
        width: calc(100vw - 20px) !important;
        max-width: 100% !important;
        margin: 10px !important;
        padding: 16px !important;
        border-radius: 16px !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
    }

    #modalOverlay .modal-header {
        margin-bottom: 0 !important;
        padding-bottom: 12px !important;
    }

        #modalOverlay .modal-header h2 {
            font-size: 16px !important;
        }

    #modalOverlay .close-button {
        font-size: 24px !important;
        width: 28px !important;
        height: 28px !important;
    }

    #modalOverlay .modal-body {
        padding-top: 8px !important;
    }

    #modalOverlay .form-row {
        flex-direction: column !important;
        gap: 14px !important;
        margin-top: 12px !important;
        margin-bottom: 12px !important;
    }

    #modalOverlay .form-group {
        width: 100% !important;
        flex: unset !important;
        gap: 4px !important;
    }

        #modalOverlay .form-group label {
            font-size: 13px !important;
        }

    #modalOverlay .form-section {
        width: 100% !important;
        margin-bottom: 0 !important;
    }

        #modalOverlay .form-section label {
            font-size: 13px !important;
            margin-bottom: 6px !important;
        }

    #modalOverlay .toggle-buttons {
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-bottom: 12px !important;
    }

    #modalOverlay .toggle-button {
        padding: 6px 12px !important;
        font-size: 12px !important;
        height: 34px !important;
        min-width: auto !important;
        flex: 0 0 auto !important;
        margin-right: 0 !important;
        border-radius: 20px !important;
    }

        #modalOverlay .toggle-button i {
            font-size: 10px !important;
            margin-right: 4px !important;
        }

    #modalOverlay .time-selects {
        flex-direction: column !important;
        gap: 10px !important;
    }

        #modalOverlay .time-selects .custom-dropdown {
            flex: unset !important;
            width: 100% !important;
            min-width: unset !important;
        }

    #modalOverlay .dropdown-header {
        font-size: 13px !important;
        height: 40px !important;
        padding: 8px 12px !important;
    }

        #modalOverlay .dropdown-header .selected-value {
            font-size: 13px !important;
        }

    #modalOverlay .form-group input,
    #modalOverlay .form-group select {
        height: 40px !important;
        font-size: 13px !important;
        padding: 8px 12px !important;
    }

    #modalOverlay .form-group textarea {
        font-size: 13px !important;
        min-height: 70px !important;
        padding: 10px 12px !important;
    }

    #modalOverlay .checkbox-group {
        margin-top: 4px !important;
    }

        #modalOverlay .checkbox-group input[type="checkbox"] {
            width: 16px !important;
            height: 16px !important;
        }

        #modalOverlay .checkbox-group label {
            font-size: 11px !important;
            line-height: 1.3 !important;
        }

    #modalOverlay .date-range-input-wrapper input[type="date"] {
        height: 40px !important;
        font-size: 13px !important;
    }

    #modalOverlay .date-range-calendar-icon {
        width: 18px !important;
        height: 18px !important;
        right: 10px !important;
    }

    /* Modal Footer - keep buttons in one row on mobile for compact layouts */
    #modalOverlay .modal-footer {
        flex-direction: row !important;
        gap: 12px !important;
        padding-top: 16px !important;
        margin-top: 16px !important;
        justify-content: flex-end !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }

    #modalOverlay .cancel-button {
        width: auto !important;
        height: 42px !important;
        font-size: 14px !important;
        order: 0 !important;
        padding: 8px 14px !important;
    }

    #modalOverlay .create-button {
        width: auto !important;
        height: 44px !important;
        font-size: 15px !important;
        order: 0 !important;
        padding: 8px 16px !important;
    }

    /* Multiple Stops Fields */
    #modalOverlay .loading-points-container {
        flex-direction: column !important;
        gap: 12px !important;
    }

        #modalOverlay .loading-points-container .form-group {
            flex: unset !important;
            width: 100% !important;
            min-width: unset !important;
        }

    #modalOverlay .remove-more-icon {
        align-self: flex-end !important;
        margin-bottom: 0 !important;
    }

    #modalOverlay .add-more-address-button {
        width: 100% !important;
        font-size: 12px !important;
        padding: 10px 16px !important;
        justify-content: center !important;
    }

        #modalOverlay .add-more-address-button img {
            width: 14px !important;
            height: 14px !important;
        }

    /* Material and Truck rows */
    #modalOverlay .material-row,
    #modalOverlay .truck-row,
    #modalOverlay .one-stop-fields {
        flex-direction: column !important;
        gap: 14px !important;
    }

    /* Ensure truck row children are responsive and can wrap */
    #modalOverlay .truck-row {
        display: flex !important;
        gap: 12px !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }

        /* Default desktop proportions (desktop styles keep original layout) */
        #modalOverlay .truck-row .truck-field {
            flex: 0 0 calc(24% - 12px) !important;
            min-width: 160px !important;
        }

        /* Ensure required trucks field keeps similar width when present */
        #modalOverlay .truck-row .required-trucks-field,
        #modalOverlay .truck-row .required-trucks-field .form-group,
        #modalOverlay .truck-row .required-trucks-field input {
            flex: 0 0 auto;
        }

        #modalOverlay .truck-row .payment-field {
            flex: 0 0 calc(50% - 12px) !important;
            min-width: 220px !important;
        }

    /* Tablet: two-column layout for truck row */
    @media (max-width: 1024px) {
        #modalOverlay .truck-row .truck-field,
        #modalOverlay .truck-row .payment-field {
            flex: 1 1 48% !important;
            min-width: 220px !important;
        }

        /* Modal-specific: Add padding and nudge delete button for create-load modal */
        #createLoadModalOverlay #loadPostForToggle .checkbox-row {
            padding-top: 25px !important;
        }

        #createLoadModalOverlay .stop-delete-wrapper {
            margin-left: 18px !important;
        }

        /* tablet adjustments: reduce weight input padding-right and ensure delete icon is sizeable for touch */
        #createLoadModalOverlay .stop-weight-group input {
            padding-right: 12px !important;
            height: 40px !important;
        }

        #createLoadModalOverlay .stop-delete-wrapper .delete-row-btn {
            width: 44px !important;
            height: 44px !important;
        }
    }

    /* Mobile: stack all truck row fields full-width */
    @media (max-width: 767px) {
        #modalOverlay .truck-row {
            flex-direction: column !important;
            gap: 10px !important;
        }

            #modalOverlay .truck-row .truck-field,
            #modalOverlay .truck-row .payment-field,
            #modalOverlay .truck-row .required-trucks-field {
                flex: 1 1 100% !important;
                width: 100% !important;
                min-width: 0 !important;
            }
    }

    /* Conditional Payment Terms */
    #modalOverlay .conditional-payment-terms {
        margin-top: 0 !important;
    }

    /* Bulk Load Fields */
    #modalOverlay .bulk-load-fields {
        flex-direction: column !important;
        gap: 14px !important;
    }

    /* Description field */
    #modalOverlay #description {
        min-height: 80px !important;
    }
}

/* Small Mobile (max-width: 375px) */
@media screen and (max-width: 375px) {
    #modalOverlay .modal-content {
        margin: 8px !important;
        padding: 14px !important;
        border-radius: 12px !important;
        max-height: 90vh !important;
    }

    #modalOverlay .modal-header h2 {
        font-size: 15px !important;
    }

    #modalOverlay .close-button {
        font-size: 22px !important;
        width: 26px !important;
        height: 26px !important;
    }

    #modalOverlay .form-row {
        gap: 12px !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    #modalOverlay .form-group label {
        font-size: 12px !important;
    }

    #modalOverlay .toggle-buttons {
        gap: 4px !important;
    }

    #modalOverlay .toggle-button {
        padding: 5px 10px !important;
        font-size: 11px !important;
        height: 32px !important;
    }

    #modalOverlay .dropdown-header {
        font-size: 12px !important;
        height: 38px !important;
        padding: 6px 10px !important;
    }

    #modalOverlay .form-group input,
    #modalOverlay .form-group select {
        height: 38px !important;
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    #modalOverlay .form-group textarea {
        font-size: 12px !important;
        min-height: 60px !important;
    }

    #modalOverlay .checkbox-group label {
        font-size: 10px !important;
    }

    #modalOverlay .modal-footer {
        gap: 8px !important;
        padding-top: 14px !important;
    }

    #modalOverlay .cancel-button,
    #modalOverlay .create-button {
        height: 40px !important;
        font-size: 13px !important;
    }

    #modalOverlay .add-more-address-button {
        font-size: 11px !important;
        padding: 8px 14px !important;
    }
}

/* ============================================================
   ALL MODALS - COMPREHENSIVE RESPONSIVE STYLES
   ============================================================ */

/* Small Modal (Accept Bid, Success, etc.) - Tablet */
@media screen and (max-width: 1024px) {
    .small-modal {
        width: 90% !important;
        max-width: 400px !important;
        padding: 24px !important;
    }

        .small-modal .modal-body {
            padding: 20px 16px !important;
        }

        .small-modal .modal-icon {
            width: 80px !important;
            height: 80px !important;
        }

        .small-modal .confirmation-text,
        .small-modal .success-message {
            font-size: 16px !important;
        }

    .small-modal-footer {
        gap: 12px !important;
    }

        .small-modal-footer button {
            min-width: 120px !important;
            font-size: 14px !important;
        }

    /* Extended Modal (Extend Bid Time) */
    .extended-modal {
        width: 90% !important;
        max-width: 450px !important;
    }

        .extended-modal .time-selects {
            flex-direction: row !important;
            gap: 12px !important;
        }

    /* Large Modal (View All Bids, Delete, Fulfill) */
    .large-modal,
    .large-modal-delete {
        width: 95% !important;
        max-width: 900px !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }

        .large-modal .modal-header h2,
        .large-modal-delete .modal-header h2 {
            font-size: 17px !important;
        }

    /* Bids Table */
    .bids-table-full {
        overflow-x: auto !important;
    }

    .bid-full-row {
        min-width: 700px !important;
    }

        .bid-full-row span {
            font-size: 12px !important;
            padding: 10px 8px !important;
        }

    /* Review Details Table */
    .review-details-table {
        overflow-x: auto !important;
    }

    .review-row {
        min-width: 600px !important;
    }

        .review-row span {
            font-size: 12px !important;
            padding: 8px 6px !important;
        }

    /* Fulfill modal vertical details layout (one line per label:value) */
    .fulfill-modal .review-details-table {
        overflow: visible !important;
        padding: 0 !important;
    }

    /* Hide the column header from the review table for fulfill modal (we show labels instead) */
    .fulfill-modal .review-row.header {
        display: none !important;
    }

    .fulfill-modal .review-details-vertical {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 8px !important;
    }

        .fulfill-modal .review-details-vertical .detail-line {
            display: flex !important;
            gap: 8px !important;
            align-items: center !important;
            font-size: 14px !important;
        }

        .fulfill-modal .review-details-vertical .detail-label {
            min-width: 220px !important;
            /* Keep labels aligned */
            font-weight: 600 !important;
            color: var(--text-muted, #6b7280) !important;
        }

        .fulfill-modal .review-details-vertical .detail-value {
            flex: 1 !important;
            color: var(--text, #111827) !important;
            font-weight: 500 !important;
        }

    /* Manage By Section */
    .manage-by-section {
        flex-wrap: wrap !important;
        gap: 16px !important;
    }

        .manage-by-section .form-group {
            flex: 1 1 200px !important;
        }
}

/* Small Modal - Mobile */
@media screen and (max-width: 767px) {
    .small-modal {
        width: calc(100% - 24px) !important;
        max-width: 100% !important;
        margin: 12px !important;
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }

        .small-modal .modal-body {
            padding: 16px 12px !important;
        }

        .small-modal .modal-icon {
            width: 60px !important;
            height: 60px !important;
        }

        .small-modal .confirmation-text {
            font-size: 14px !important;
            line-height: 1.4 !important;
        }

        .small-modal .success-message {
            font-size: 15px !important;
        }

        .small-modal .note-message {
            font-size: 12px !important;
        }

    .small-modal-footer {
        flex-direction: column-reverse !important;
        gap: 10px !important;
    }

        .small-modal-footer button {
            width: 100% !important;
            min-width: unset !important;
            height: 42px !important;
        }

    /* Extended Modal */
    .extended-modal {
        width: calc(100% - 24px) !important;
        max-width: 100% !important;
    }

        .extended-modal .modal-header h2 {
            font-size: 16px !important;
        }

        .extended-modal .time-selects {
            flex-direction: column !important;
            gap: 12px !important;
        }

            .extended-modal .time-selects .custom-dropdown {
                width: 100% !important;
            }

    /* Large Modal */
    .large-modal,
    .large-modal-delete {
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        margin: 10px !important;
        padding: 16px !important;
        border-radius: 16px !important;
        max-height: 88vh !important;
    }

        .large-modal .modal-header h2,
        .large-modal-delete .modal-header h2 {
            font-size: 15px !important;
        }

    /* Bids Table - Card Layout on Mobile */
    .bids-table-full {
        display: block !important;
    }

    .bid-full-row.header {
        display: none !important;
    }

    .bid-full-row:not(.header) {
        display: flex !important;
        flex-direction: column !important;
        min-width: unset !important;
        border: 1px solid #e4e7ec !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
        padding: 12px !important;
        gap: 8px !important;
    }

        .bid-full-row:not(.header) span {
            display: flex !important;
            justify-content: space-between !important;
            padding: 6px 0 !important;
            border-right: none !important;
            border-bottom: 1px solid #f0f0f0 !important;
        }

            .bid-full-row:not(.header) span:last-child {
                border-bottom: none !important;
            }

            .bid-full-row:not(.header) span::before {
                content: attr(data-label);
                font-weight: 500 !important;
                color: #667085 !important;
                font-size: 11px !important;
            }

    /* Review Details Table - Stack on Mobile */
    .review-details-table {
        display: block !important;
    }

    .review-row.header {
        display: none !important;
    }

    .review-row:not(.header),
    .review-row-value {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        min-width: unset !important;
        padding: 12px !important;
    }

        .review-row span,
        .review-row-value span {
            font-size: 12px !important;
            padding: 4px 0 !important;
        }

    /* Manage By Section */
    .manage-by-section {
        flex-direction: column !important;
        gap: 14px !important;
    }

    /* Fulfill modal: Managed By toggle should be a 1x2 layout (Loadsor/Other) */
    .fulfill-modal .manage-by-section {
        flex-direction: row !important;
        align-items: center !important;
        gap: 16px !important;
    }

        .fulfill-modal .manage-by-section .toggle-buttons {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            gap: 8px !important;
            width: 200px !important;
        }

        .fulfill-modal .manage-by-section .form-label {
            min-width: 140px !important;
            font-weight: 600 !important;
        }

    /* Fulfill form groups (Transporter name & mobile) should be single-line rows */
    .fulfill-modal .form-group.transport {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        margin-top: 0 !important;
    }

        .fulfill-modal .form-group.transport label.form-label {
            min-width: 170px !important;
            margin-bottom: 0 !important;
            font-size: 14px !important;
            font-weight: 600 !important;
        }

        .fulfill-modal .form-group.transport input[type="text"] {
            flex: 1 !important;
            min-width: 0 !important;
        }

    .fulfill-modal .input-with-icon .icon {
        margin-right: 8px !important;
        color: #111827 !important;
    }

    .manage-by-section .form-group {
        width: 100% !important;
        flex: unset !important;
    }

    .manage-by-section .toggle-buttons {
        flex-wrap: wrap !important;
    }

    /* Modal Section Title */
    .modal-section-title {
        font-size: 14px !important;
        margin-bottom: 10px !important;
        margin-top: 16px !important;
    }

    /* Delete/Fulfill Modal Footer */
    .large-modal-delete .modal-footer,
    .modal-footer.center-buttons {
        gap: 10px !important;
        margin-left: -16px;
        margin-right: -16px;
    }

        .large-modal-delete .modal-footer button,
        .modal-footer.center-buttons button {
            width: 100% !important;
        }
}

/* ============================================================
   FILTER MODAL - RESPONSIVE STYLES
   ============================================================ */
@media screen and (max-width: 1024px) {
    .filter-modal {
        width: 90% !important;
        max-width: 550px !important;
    }

    .filter-modal-content {
        padding: 20px !important;
    }

    .filter-form-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 14px !important;
    }
}

@media screen and (max-width: 767px) {
    .filter-modal {
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        margin: 10px !important;
        border-radius: 16px !important;
    }

    .filter-modal-content {
        padding: 16px !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }

    .filter-modal-header {
        padding-bottom: 12px !important;
    }

        .filter-modal-header h3 {
            font-size: 16px !important;
        }

    .filter-form-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .filter-form-group label {
        font-size: 13px !important;
    }

    .filter-form-group input,
    .filter-form-group select,
    .filter-form-group .dropdown-header {
        height: 40px !important;
        font-size: 13px !important;
    }

    .filter-actions {
        flex-direction: column-reverse !important;
        gap: 10px !important;
        padding-top: 16px !important;
    }

    .filter-clear-btn,
    .filter-apply-btn {
        width: 100% !important;
        height: 42px !important;
    }
}

/* ============================================================
   DROPDOWNS - RESPONSIVE STYLES
   ============================================================ */
@media screen and (max-width: 767px) {
    /* Profile Dropdown */
    .profile-dropdown {
        position: fixed !important;
        top: 60px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        max-width: none !important;
        border-radius: 16px !important;
        max-height: calc(100vh - 130px) !important;
        overflow-y: auto !important;
    }

        .profile-dropdown .profile-dropdown-header {
            padding: 12px 16px !important;
            font-size: 11px !important;
        }

        .profile-dropdown .dropdown-menu-list li {
            min-height: 44px !important;
            padding: 8px 16px !important;
        }

            .profile-dropdown .dropdown-menu-list li .username {
                font-size: 13px !important;
            }

            .profile-dropdown .dropdown-menu-list li .user-detail {
                font-size: 11px !important;
            }

    .set-truck-time-button {
        margin: 14px 16px !important;
        font-size: 13px !important;
        padding: 10px 16px !important;
    }

    /* More Dropdown */
    .more-dropdown {
        position: fixed !important;
        top: 60px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        border-radius: 16px !important;
        max-height: calc(100vh - 130px) !important;
        overflow-y: auto !important;
    }

        .more-dropdown .more-dropdown-menu-list li {
            padding: 12px 16px !important;
        }

            .more-dropdown .more-dropdown-menu-list li .text {
                font-size: 13px !important;
            }

    /* Notification Modal - Full screen on mobile */
    .notification-modal {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        z-index: 9999 !important;
        display: none !important;
    }

        .notification-modal[style*="display: flex"],
        .notification-modal[style*="display: block"] {
            display: flex !important;
            flex-direction: column !important;
        }

        .notification-modal .modal-header {
            padding: 16px !important;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
            flex-shrink: 0 !important;
        }

            .notification-modal .modal-header h2 {
                font-size: 18px !important;
                font-weight: 600 !important;
            }

        .notification-modal .modal-body {
            flex: 1 !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch !important;
            padding: 0 !important;
        }

        .notification-modal .notification-list {
            padding: 0 !important;
            margin: 0 !important;
        }

            .notification-modal .notification-list li {
                display: flex !important;
                flex-direction: row !important;
                align-items: flex-start !important;
                padding: 14px !important;
                gap: 10px !important;
                width: 100% !important;
                height: auto !important;
                min-height: 80px !important;
                box-sizing: border-box !important;
                border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
            }

                .notification-modal .notification-list li .icon {
                    flex-shrink: 0 !important;
                    width: 24px !important;
                    height: 24px !important;
                    padding: 0 !important;
                    display: flex !important;
                    align-items: center !important;
                    justify-content: center !important;
                    margin-top: 2px !important;
                }

                    .notification-modal .notification-list li .icon img {
                        width: 22px !important;
                        height: 22px !important;
                    }

                .notification-modal .notification-list li .notification-content {
                    flex: 1 !important;
                    display: flex !important;
                    flex-direction: row !important;
                    align-items: flex-start !important;
                    justify-content: space-between !important;
                    gap: 10px !important;
                    width: auto !important;
                    min-width: 0 !important;
                }

                    .notification-modal .notification-list li .notification-content p {
                        flex: 1 !important;
                        padding-right: 0 !important;
                        font-size: 13px !important;
                        line-height: 1.5 !important;
                        height: auto !important;
                        word-wrap: break-word !important;
                        overflow-wrap: break-word !important;
                        white-space: normal !important;
                        margin: 0 !important;
                        color: #5a5e63 !important;
                    }

                .notification-modal .notification-list li .timestamp {
                    flex-shrink: 0 !important;
                    font-size: 11px !important;
                    line-height: 1.5 !important;
                    color: rgba(60, 64, 68, 0.5) !important;
                    white-space: nowrap !important;
                    margin-top: 0 !important;
                    padding-left: 8px !important;
                }
}

/* ============================================================
   VEHICLE DETAILS & UPLOAD INVOICE MODALS - RESPONSIVE
   ============================================================ */
@media screen and (max-width: 1024px) {
    .vehicle-details-modal-content,
    .upload-invoice-modal-content {
        width: 90% !important;
        max-width: 600px !important;
        padding: 20px !important;
    }

    .vehicle-details-grid {
        gap: 14px 60px !important;
    }

    .upload-sections {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media screen and (max-width: 767px) {
    .vehicle-details-modal-content {
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        padding: 16px !important;
        border-radius: 16px !important;
    }

    .vehicle-details-modal-header {
        padding-bottom: 14px !important;
    }

        .vehicle-details-modal-header h2 {
            font-size: 16px !important;
        }

    .vehicle-details-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .vehicle-detail-item {
        flex-direction: row !important;
        justify-content: space-between !important;
    }

    .vehicle-detail-label {
        font-size: 13px !important;
        min-width: unset !important;
    }

    .vehicle-detail-value {
        font-size: 13px !important;
        text-align: right !important;
    }

    /* Upload Invoice Modal */
    .upload-invoice-modal-content {
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        padding: 16px !important;
        border-radius: 16px !important;
    }

    .upload-invoice-modal-header h2 {
        font-size: 16px !important;
    }

    .upload-sections {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .upload-section h3 {
        font-size: 15px !important;
    }

    .upload-area {
        height: 200px !important;
    }
}

/* ============================================================
   TRUCK STATUS MODAL - RESPONSIVE
   ============================================================ */

/* Base styles for all screen sizes - ensure calendar icon is clickable */
.truck-status-modal-overlay .date-range-input-wrapper-filter {
    position: relative !important;
}

    .truck-status-modal-overlay
    .date-range-input-wrapper-filter
    .date-range-calendar-icon {
        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        z-index: 10 !important;
        width: 20px !important;
        height: 20px !important;
    }

        .truck-status-modal-overlay
        .date-range-input-wrapper-filter
        .date-range-calendar-icon:hover {
            opacity: 0.7 !important;
        }

@media screen and (max-width: 1024px) {
    #truckStatusModalOverlay .modal-content {
        width: 90% !important;
        max-width: 700px !important;
        min-width: unset !important;
    }

    .truck-status-form-row {
        width: 100%;
        flex-wrap: wrap !important;
        gap: 16px !important;
    }

        .truck-status-form-row .filter-group {
            flex: 1 1 200px !important;
        }
}

@media screen and (max-width: 767px) {
    #truckStatusModalOverlay .modal-content {
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
        min-width: unset !important;
        padding: 16px !important;
        border-radius: 16px !important;
        height: auto !important;
        max-height: 90vh !important;
    }

    #truckStatusModalOverlay .modal-header {
        padding: 12px 16px !important;
        margin: -16px -16px 16px -16px !important;
    }

        #truckStatusModalOverlay .modal-header h2 {
            font-size: 18px !important;
        }

    #truckStatusModalOverlay .modal-body {
        padding: 0 !important;
        overflow-y: auto !important;
        max-height: calc(90vh - 120px) !important;
    }

    .truck-status-form-section {
        margin-bottom: 16px !important;
        padding-bottom: 16px !important;
    }

    .truck-status-form-row {
        width: 100% !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

        .truck-status-form-row .filter-group {
            flex: unset !important;
            width: 100% !important;
        }

            .truck-status-form-row .filter-group label {
                font-size: 14px !important;
                margin-bottom: 6px !important;
            }

        .truck-status-form-row .custom-dropdown {
            width: 100% !important;
        }

            .truck-status-form-row .custom-dropdown .dropdown-header {
                padding: 10px 12px !important;
                font-size: 14px !important;
            }

        .truck-status-form-row .date-range-input-wrapper-filter {
            width: 100% !important;
            position: relative !important;
        }

            .truck-status-form-row .date-range-input-wrapper-filter input {
                width: 100% !important;
                padding: 10px 12px !important;
                font-size: 14px !important;
            }

            /* Ensure calendar icon is clickable */
            .truck-status-form-row
            .date-range-input-wrapper-filter
            .date-range-calendar-icon {
                position: absolute !important;
                right: 12px !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
                cursor: pointer !important;
                pointer-events: auto !important;
                z-index: 10 !important;
                width: 20px !important;
                height: 20px !important;
            }

    #truckStatusModalOverlay .bids-table-full {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #truckStatusModalOverlay .bid-full-row {
        min-width: 600px !important;
    }

        #truckStatusModalOverlay .bid-full-row span {
            font-size: 12px !important;
            padding: 8px 6px !important;
        }

    .truck-status-records-section {
        margin-top: 16px !important;
    }

    .truck-status-empty-state {
        padding: 32px 16px !important;
        font-size: 13px !important;
    }
}

@media screen and (max-width: 480px) {
    #truckStatusModalOverlay .modal-content {
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        border-radius: 12px !important;
    }

    #truckStatusModalOverlay .modal-header {
        padding: 10px 12px !important;
        margin: -12px -12px 12px -12px !important;
    }

        #truckStatusModalOverlay .modal-header h2 {
            font-size: 16px !important;
        }

        #truckStatusModalOverlay .modal-header .close-button {
            width: 28px !important;
            height: 28px !important;
            font-size: 20px !important;
        }

    #truckStatusModalOverlay .modal-body {
        max-height: calc(90vh - 100px) !important;
    }

    .truck-status-form-section {
        margin-bottom: 12px !important;
        padding-bottom: 12px !important;
    }

    .truck-status-form-row {
        gap: 12px !important;
    }

        .truck-status-form-row .filter-group label {
            font-size: 13px !important;
        }

        .truck-status-form-row .custom-dropdown .dropdown-header {
            padding: 9px 10px !important;
            font-size: 13px !important;
        }

        .truck-status-form-row .date-range-input-wrapper-filter input {
            padding: 9px 10px !important;
            font-size: 13px !important;
        }

    #truckStatusModalOverlay .bid-full-row {
        min-width: 500px !important;
    }

        #truckStatusModalOverlay .bid-full-row span {
            font-size: 11px !important;
            padding: 6px 4px !important;
        }

    .truck-status-empty-state {
        padding: 24px 12px !important;
        font-size: 12px !important;
    }
}

/* ============================================================
   CHECK CHALLAN MODAL - RESPONSIVE
   ============================================================ */
@media screen and (max-width: 767px) {
    .check-challan-modal {
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        right: auto !important;
        left: 10px !important;
        border-radius: 16px !important;
    }
}

/* ============================================================
   LOAD POST CARDS - MOBILE ENHANCED (max-width: 767px)
   ============================================================ */
@media screen and (max-width: 767px) {
    /* Search Bar Mobile - Full Width */
    .search-and-actions {
        width: 100% !important;
        order: -1 !important;
        flex-wrap: nowrap !important;
    }

    .search-bar {
        flex: 1 !important;
        width: auto !important;
        min-width: unset !important;
    }

    .tabs-and-search-container {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .tabs {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

        .tabs::-webkit-scrollbar {
            display: none !important;
        }

    .tab-button {
        font-size: 12px !important;
        padding: 8px 0 !important;
        white-space: nowrap !important;
    }

    /* Card Layout - Mobile Stacked */
    .post-header {
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        padding: 14px 16px !important;
        gap: 8px !important;
        background: transparent !important;
        border: none !important;
    }

    .post-meta {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        font-size: 13px !important;
        color: #3c4044 !important;
        line-height: 1.5 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
    }

    /* Hide default action buttons on mobile, keep kebab menu */
    .card-actions-overflow {
        display: none !important;
    }

    /* Card body stacked on mobile */
    .card-body {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
    }

    /* Post ID Row Mobile */
    .post-id-row {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
        padding: 0 0 12px 0 !important;
        border-bottom: 1px solid #e4e7ec !important;
    }

    .post-id-badge {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #101828 !important;
    }

    .open-status {
        font-size: 11px !important;
        padding: 4px 12px !important;
        border-radius: 6px !important;
        background: rgba(81, 158, 138, 0.1) !important;
        color: #519e8a !important;
        font-weight: 500 !important;
    }

    /* Location Section Mobile */
    .location-section {
        padding: 16px !important;
        border-right: none !important;
        border-bottom: 1px solid #e4e7ec !important;
        height: auto !important;
    }

    .location-path {
        margin-top: 0 !important;
        position: relative !important;
        padding-left: 30px !important;
        gap: 0 !important;
    }

    /* Show vertical connector line in mobile */
    .location-connector {
        display: block !important;
        position: absolute !important;
        left: 11px !important;
        top: 22px !important;
        width: 2px !important;
        height: calc(100% - 44px) !important;
        background: #519e8a !important;
        z-index: 1 !important;
    }

    .location-line {
        position: relative !important;
        padding-left: 0 !important;
        height: auto !important;
        min-height: auto !important;
        gap: 10px !important;
    }

    .location-line-end {
        position: relative !important;
        padding-left: 0 !important;
        height: auto !important;
        margin-top: 0 !important;
        gap: 10px !important;
    }

        .location-line .location-dot,
        .location-line-end .location-dot {
            left: -29px !important;
            top: 0 !important;
            width: 22px !important;
            height: 22px !important;
            z-index: 2 !important;
        }

    .location-info {
        gap: 2px !important;
    }

    .location-label {
        font-size: 12px !important;
        color: #667085 !important;
    }

    .location-text {
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #101828 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    .multiple-locations-wrapper {
        margin-top: 4px !important;
    }

    .multiple-locations-text {
        font-size: 13px !important;
        color: #519e8a !important;
    }

    .distance-info {
        display: block !important;
        margin: 12px 0 !important;
        font-size: 13px !important;
        color: #667085 !important;
    }

    .schedule-info {
        display: block !important;
        margin-top: 16px !important;
        padding-top: 16px !important;
        border-top: 1px solid #e4e7ec !important;
        font-size: 14px !important;
        color: #101828 !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Details Section Mobile - Stacked Label/Value */
    .details-section {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        padding: 16px !important;
        border-right: none !important;
        border-bottom: 1px solid #e4e7ec !important;
        grid-template-columns: unset !important;
        height: auto !important;
    }

    .detail-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 16px !important;
    }

        .detail-item .label {
            min-width: 95px !important;
            width: 95px !important;
            font-size: 13px !important;
            font-weight: 400 !important;
            color: #667085 !important;
            flex-shrink: 0 !important;
        }

        .detail-item .value {
            font-size: 14px !important;
            font-weight: 600 !important;
            color: #101828 !important;
            flex: 1 !important;
            margin-top: 0 !important;
        }

    /* Bidding Section Mobile */
    .bidding-section {
        padding: 0 !important;
        width: 100% !important;
        min-height: auto !important;
    }

    .bidding-header {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 16px !important;
        background: linear-gradient( 90deg, rgba(81, 158, 138, 0.12) 0%, rgba(255, 255, 255, 0) 100% ) !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    .bidding-time-info {
        font-size: 13px !important;
        color: #3c4044 !important;
        width: auto !important;
        flex: unset !important;
    }

    .bidding-timer {
        font-weight: 600 !important;
        color: #519e8a !important;
    }

        .bidding-timer.timeout {
            color: #e63946 !important;
        }

    .timer-left-text {
        color: #667085 !important;
        font-size: 12px !important;
    }

    .extend-bid-time-button {
        font-size: 11px !important;
        padding: 5px 12px !important;
        height: auto !important;
        margin-left: 8px !important;
    }

    /* Bids Table - 3 Columns L1, L2, L3 */
    .bidding-table-container {
        padding: 0 !important;
    }

    .bids-table {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    .bid-row {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0 !important;
        width: 100% !important;
    }

        .bid-row.header {
            background: #f9fafb !important;
            border-bottom: 1px solid #e4e7ec !important;
        }

            .bid-row.header span {
                padding: 12px 8px !important;
                text-align: center !important;
                font-size: 13px !important;
                font-weight: 500 !important;
                color: #667085 !important;
                border-right: 1px solid #e4e7ec !important;
            }

                .bid-row.header span:last-child {
                    border-right: none !important;
                }

        .bid-row:not(.header) span {
            padding: 16px 8px !important;
            text-align: center !important;
            font-size: 14px !important;
            color: #101828 !important;
            border-right: 1px solid #e4e7ec !important;
        }

            .bid-row:not(.header) span:last-child {
                border-right: none !important;
            }

    .bid-cell {
        flex: 1 !important;
        text-align: center !important;
        padding: 16px 8px !important;
        border-right: 1px solid #e4e7ec !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

        .bid-cell:last-child {
            border-right: none !important;
        }

    .bid-label {
        display: block !important;
        font-size: 12px !important;
        color: #667085 !important;
        margin-bottom: 8px !important;
    }

    .bid-amount {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #101828 !important;
        margin-bottom: 10px !important;
    }

    .accept-bid-button-inline {
        font-size: 11px !important;
        padding: 6px 16px !important;
        width: auto !important;
    }

    /* Bidding Summary Row */
    .bidding-summary-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        border-top: 1px solid #e4e7ec !important;
        margin-top: 0 !important;
    }

    .view-all-bids {
        /* color: #519e8a !important; */
        font-size: 13px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
    }

    /* Trucks Row - 3 columns */
    .bid-actions {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0 !important;
        border-top: 1px solid #e4e7ec !important;
        border-radius: 0 !important;
        margin-top: 0 !important;
    }

        .bid-actions span {
            text-align: center !important;
            padding: 12px 8px !important;
            font-size: 12px !important;
            color: #667085 !important;
            border-right: 1px solid #e4e7ec !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            min-height: auto !important;
            gap: 4px !important;
            line-height: 1.3 !important;
        }

            .bid-actions span:last-child {
                border-right: none !important;
            }

            .bid-actions span strong {
                font-size: 16px !important;
                color: #101828 !important;
            }

    /* Description Section Mobile */
    .description-section {
        padding: 14px 16px !important;
        font-size: 13px !important;
        color: #667085 !important;
        border-top: 1px solid #e4e7ec !important;
        line-height: 1.5 !important;
    }

    .description-label {
        font-weight: 500 !important;
        color: #49454f !important;
    }

    .description-text {
        color: #667085 !important;
    }
}

/* Strong override: force true 3-column layout on mobile (ensure L1/L2/L3 are side-by-side)
   This avoids stacking from other layout rules and centers content in each column. */
@media screen and (max-width: 767px) {
    .bids-table {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
    }

        /* Ensure each row (header and data row) lays out into 3 equal columns */
        .bids-table .bid-row.header,
        .bids-table .bid-row {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr) !important;
            gap: 0 !important;
            width: 100% !important;
            align-items: center !important;
        }

            /* Make header spans and bid-cells occupy their grid cells and center contents */
            .bids-table .bid-row.header span,
            .bids-table .bid-row .bid-cell {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                flex-direction: column !important;
                text-align: center !important;
                padding: 10px 6px !important;
                min-height: 56px !important;
            }

                /* Keep the placeholder `--` visually muted and centered */
                .bids-table .bid-row .bid-cell .bid-amount {
                    display: block !important;
                }

                .bids-table .bid-row .bid-cell:last-child {
                    /* no right border on last column */
                    border-right: none !important;
                }
}

/* ============================================================
   LOAD POST CARDS - SMALL MOBILE (max-width: 375px)
   ============================================================ */
@media screen and (max-width: 375px) {
    .post-meta {
        font-size: 12px !important;
    }

    .post-id-badge {
        font-size: 13px !important;
    }

    .location-text {
        font-size: 13px !important;
    }

    .detail-item .label {
        min-width: 80px !important;
        width: 80px !important;
        font-size: 12px !important;
    }

    .detail-item .value {
        font-size: 13px !important;
    }

    .bidding-time-info span {
        font-size: 12px !important;
    }

    .bid-label {
        font-size: 11px !important;
    }

    .bid-amount {
        font-size: 13px !important;
    }

    .bid-actions span {
        font-size: 11px !important;
        padding: 10px 6px !important;
    }

        .bid-actions span strong {
            font-size: 14px !important;
        }

    .description-section {
        font-size: 12px !important;
        padding: 12px 14px !important;
    }

    .extend-bid-time-button {
        font-size: 10px !important;
        padding: 4px 10px !important;
    }
}

/* ============================================================
   MOBILE KEBAB MENU STYLES
   ============================================================ */
.mobile-kebab-menu {
    display: none;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #667085;
    font-size: 16px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
    margin-left: auto;
}

/* Ensure filter icon remains visible on desktop even with mobile-kebab-menu class */
.filter-icon.mobile-kebab-menu {
    display: flex !important;
    width: auto !important;
    height: auto !important;
    margin-left: 0 !important;
}

.mobile-kebab-menu:hover {
    background-color: #f3f4f6;
}

.mobile-kebab-menu i {
    font-size: 16px;
}

@media screen and (max-width: 767px) {
    .mobile-kebab-menu {
        display: flex !important;
    }

    .post-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
    }
}

/* Mobile Actions Dropdown Hover States */
.mobile-action-item:hover {
    background-color: #f9fafb;
}

.mobile-action-item:active {
    background-color: #f3f4f6;
}

/* ============================================================
   BOTTOM SHEET DIALOG STYLES - MOBILE & TABLET
   ============================================================ */

/* Global Keyframe Animations for Bottom Sheet */
@keyframes bottomSheetSlideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

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

@keyframes bottomSheetSlideDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* Bottom Sheet Base - Applies to all modals/popups on mobile/tablet */
@media screen and (max-width: 1024px) {
    /* Transform all modals to bottom sheet style */
    .modal-overlay,
    #modalOverlay,
    #acceptBidConfirmationModalOverlay,
    #acceptBidSuccessModalOverlay,
    #viewAllBidsModalOverlay,
    #extendBidTimeModalOverlay,
    #confirmDeleteModalOverlay,
    #confirmFulfillModalOverlay,
    #truckStatusModalOverlay,
    #checkChallanModalOverlay,
    #filterModalOverlay {
        align-items: flex-end !important;
        justify-content: center !important;
    }

    /* Force black text for delete modal details */
    .delete-details-grid,
    .delete-details-grid * {
        color: #000000 !important;
    }

        .delete-details-grid .delete-label {
            color: rgba(0, 0, 0, 0.9) !important;
            font-weight: 500 !important;
        }

        .delete-details-grid .delete-value {
            color: #000000 !important;
            font-weight: 600 !important;
        }

    .modal-content,
    .modal-overlay .modal-content,
    #modalOverlay .modal-content {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 90vh !important;
        margin: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        animation: bottomSheetSlideUp 0.3s ease-out !important;
    }

        /* Bottom Sheet Handle/Drag Indicator */
        .modal-content::before {
            /* content: "" !important; */
            display: block !important;
            width: 40px !important;
            height: 4px !important;
            background: #d0d5dd !important;
            border-radius: 4px !important;
            margin: 8px auto 12px auto !important;
        }

        /* Remove handle for confirmation modal specifically */
        .modal-content.confirmation-modal::before,
        .confirmation-modal::before {
            display: none !important;
            content: none !important;
        }

    /* Bottom Sheet Slide Up Animation */
    @keyframes bottomSheetSlideUp {
        from {
            transform: translateY(100%);
            opacity: 0;
        }

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

    @keyframes bottomSheetSlideDown {
        from {
            transform: translateY(0);
            opacity: 1;
        }

        to {
            transform: translateY(100%);
            opacity: 0;
        }
    }

    /* Modal Header - Bottom Sheet Style */

    .modal-header h2 {
        font-size: 18px !important;
        text-align: center !important;
        flex: 1 !important;
    }

    .modal-close {
        position: absolute !important;
        right: 16px !important;
        top: 20px !important;
    }

    /* Modal Body - Bottom Sheet Style */
    .modal-body {
        padding: 16px !important;
        overflow-y: auto !important;
        max-height: calc(90vh - 140px) !important;
    }

    /* Modal Footer - Bottom Sheet Style */
    .modal-footer {
        padding: 12px 16px !important;
        border-top: 1px solid #e4e7ec !important;
        background: #ffffff !important;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05) !important;
    }

        .modal-footer button {
            flex: 1 !important;
            min-height: 44px !important;
        }

    /* Create modal-specific footer: keep Create + Cancel on one line (1x2) across viewports */
    .create-footer {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

        .create-footer .btn-create,
        .create-footer .btn-cancel {
            flex: 1 !important;
            min-width: 0 !important;
            height: 44px !important;
        }

    /* Footer Stack: 1x2 layout for bottom sheet modals on mobile/tablet */
    .modal-footer.center-buttons,
    .small-modal-footer.center-buttons {
        display: flex !important;
        flex-direction: column-reverse !important;
        /* Keep primary action on top */
        gap: 12px !important;
    }

        .modal-footer.center-buttons button,
        .small-modal-footer.center-buttons button {
            width: 100% !important;
        }

    /* Confirmation Modals - Bottom Sheet Style */
    .confirmation-modal,
    .success-modal {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 12px 16px 24px 16px !important;
    }

        /* Show small modal footer in a row for confirmation modal to keep Cancel + Accept on one line */
        .confirmation-modal .small-modal-footer,
        .confirmation-modal .modal-footer {
            display: flex !important;
            gap: 12px !important;
            justify-content: center !important;
            align-items: center !important;
            flex-direction: row !important;
        }

            .confirmation-modal .small-modal-footer button,
            .confirmation-modal .modal-footer button {
                min-width: 120px !important;
            }

        .success-modal::before {
            /* content: "" !important; */
            display: block !important;
            width: 40px !important;
            height: 4px !important;
            background: #d0d5dd !important;
            border-radius: 4px !important;
            margin: 0 auto 16px auto !important;
        }

    /* View All Bids Modal - Bottom Sheet Style */
    .view-all-bids-modal {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 80vh !important;
    }

        .view-all-bids-modal::before {
            content: "" !important;
            display: block !important;
            width: 40px !important;
            height: 4px !important;
            background: #d0d5dd !important;
            border-radius: 4px !important;
            margin: 8px auto 12px auto !important;
        }

    /* Extend Bid Time Modal - Bottom Sheet Style */
    .extend-bid-modal {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
    }

        /* Make the extend-bid modal inputs appear in a 2x2 layout on mobile/tablet */
        .extend-bid-modal .time-selects {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 12px !important;
        }

            .extend-bid-modal .time-selects .custom-dropdown,
            .extend-bid-modal .time-selects .dropdown-header {
                width: 100% !important;
            }

        /* Show modal footer buttons side-by-side for extend modal on smaller screens */
        .extend-bid-modal .modal-footer.center-buttons,
        .fulfill-modal .modal-footer.center-buttons {
            flex-direction: row !important;
            gap: 12px !important;
            justify-content: space-between !important;
        }

            .extend-bid-modal .modal-footer.center-buttons button {
                width: 48% !important;
            }

    /* Removed extend-bid-modal handle */

    /* Delete/Fulfill Confirmation Modals */
    .delete-modal,
    .fulfill-modal {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 85vh !important;
    }

        .delete-modal::before,
        .fulfill-modal::before {
            content: "" !important;
            display: block !important;
            width: 40px !important;
            height: 4px !important;
            background: #d0d5dd !important;
            border-radius: 4px !important;
            margin: 8px auto 12px auto !important;
        }

    /* Truck Status Modal - Bottom Sheet Style */
    .truck-status-modal,
    .check-challan-modal {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 80vh !important;
    }

        .truck-status-modal::before,
        .check-challan-modal::before {
            content: "" !important;
            display: block !important;
            width: 40px !important;
            height: 4px !important;
            background: #d0d5dd !important;
            border-radius: 4px !important;
            margin: 8px auto 12px auto !important;
        }
}

/* Mobile Specific Bottom Sheet Adjustments */
@media screen and (max-width: 767px) {
    .modal-content,
    .modal-overlay .modal-content,
    #modalOverlay .modal-content {
        max-height: 95vh !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .modal-header h2 {
        font-size: 16px !important;
    }

    .modal-body {
        max-height: calc(95vh - 130px) !important;
        padding: 12px !important;
    }

    /* .modal-footer {
        padding: 10px 12px 16px 12px !important;
    } */

    .modal-footer button {
        font-size: 14px !important;
        min-height: 42px !important;
    }

    /* Mobile Actions Menu - Dropdown Style */
    .mobile-actions-dropdown,
    .confirmed-actions-dropdown {
        position: absolute !important;
        background: white !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        min-width: 180px !important;
        padding: 4px 0 !important;
        border: 1px solid #e4e7ec !important;
    }

    .confirmed-actions-dropdown {
        min-width: 200px !important;
    }

    .mobile-action-item {
        padding: 10px 14px !important;
        font-size: 14px !important;
        transition: background-color 0.15s ease !important;
    }

        .mobile-action-item:hover {
            background-color: #f9fafb !important;
        }

    /* Confirmed actions dropdown: ensure divider and icon+text hover color */
    .confirmed-actions-dropdown .mobile-action-item {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        color: #49454f !important;
        transition: background-color 0.15s ease, color 0.15s ease !important;
    }

        .confirmed-actions-dropdown .mobile-action-item:not(:last-child) {
            border-bottom: 1px solid #f2f4f7 !important;
        }

        .confirmed-actions-dropdown .mobile-action-item img {
            transition: filter 0.15s ease, opacity 0.15s ease !important;
        }

        .confirmed-actions-dropdown .mobile-action-item:hover {
            background-color: #f9fafb !important;
            color: #519e8a !important;
        }

            .confirmed-actions-dropdown .mobile-action-item:hover img {
                filter: invert(56%) sepia(68%) saturate(399%) hue-rotate(106deg) brightness(91%) contrast(88%) !important;
            }

    /* Confirmation modals take full width with safe area */
    .confirmation-modal,
    .success-modal {
        padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
    }

    /* Form Groups in Bottom Sheet */
    .modal-body .form-group {
        margin-bottom: 12px !important;
    }

        .modal-body .form-group label {
            font-size: 13px !important;
            margin-bottom: 4px !important;
        }

        .modal-body .form-group input,
        .modal-body .form-group select,
        .modal-body .form-group textarea {
            /* min-height: 50px !important; */
            font-size: 14px !important;
        }

    /* Toggle Buttons in Bottom Sheet */
    .modal-body .toggle-buttons {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .modal-body .toggle-button {
        font-size: 12px !important;
        padding: 6px 12px !important;
        height: 36px !important;
    }

    /* Form Rows in Modal */
    .modal-body .form-row {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .modal-body .form-section {
        width: 100% !important;
    }
}

/* Tablet Specific Bottom Sheet Adjustments */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .modal-content,
    .modal-overlay .modal-content,
    #modalOverlay .modal-content {
        max-width: 90% !important;
        max-height: 85vh !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 auto !important;
    }

    .modal-header h2 {
        font-size: 18px !important;
    }

    .modal-body {
        max-height: calc(85vh - 150px) !important;
        padding: 20px !important;
    }

    .modal-footer {
        padding: 16px 20px !important;
    }

    /* Confirmation modals at tablet size */
    .confirmation-modal,
    .success-modal,
    .view-all-bids-modal,
    .extend-bid-modal,
    .delete-modal,
    .fulfill-modal {
        max-width: 500px !important;
        margin: 0 auto !important;
    }
}

/* Bottom Sheet Overlay Enhancement */
@media screen and (max-width: 1024px) {
    .modal-overlay {
        background: rgba(0, 0, 0, 0.5) !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
    }
}

/* Filter Header Actions & Close Button */
.filter-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.close-filter-sidebar {
    display: none;
    /* Hidden on desktop */
}

/* Filter Sidebar as Bottom Sheet on Mobile & Tablet */
@media screen and (max-width: 1024px) {
    .filter-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 16px !important;
    }

        .filter-header h3 {
            margin: 0 !important;
            font-size: 18px !important;
        }

    .close-filter-sidebar {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        cursor: pointer;
        border-radius: 50%;
        background: #f2f4f7;
        margin-left: 8px;
    }

    /* Ensure consistent font sizing across the Filter overlay/modal */
    .filter-overlay .filter-container,
    .filter-overlay .filter-container .filter-body,
    .filter-overlay .filter-container .filter-grid,
    .filter-overlay .filter-container label,
    .filter-overlay .filter-container input,
    .filter-overlay .filter-container .select-trigger span,
    .filter-overlay .filter-container .select-options .option,
    .filter-overlay .filter-container .filter-footer button {
        font-size: 14px !important;
        font-family: var(--font-family) !important;
    }

        /* Keep the modal title larger */
        .filter-overlay .filter-container .filter-header h3 {
            font-size: 18px !important;
        }

        /* Placeholder text should also match */
        .filter-overlay .filter-container input::placeholder {
            font-size: 14px !important;
            color: rgba(60, 64, 68, 0.5) !important;
        }

    /* Small screens slightly reduce label size, keep inputs readable */
    @media screen and (max-width: 767px) {
        .filter-overlay .filter-container label {
            font-size: 13px !important;
        }

        .filter-overlay .filter-container input,
        .filter-overlay .filter-container .select-trigger span,
        .filter-overlay .filter-container .select-options .option,
        .filter-overlay .filter-container .filter-footer button {
            font-size: 14px !important;
        }
    }

    /* Tablet (768px - 1024px) layout: 2 columns x 5 rows */
    @media screen and (min-width: 768px) and (max-width: 1024px) {
        .filter-grid {
            grid-template-columns: repeat(2, 1fr) !important;
            grid-template-rows: repeat(5, auto) !important;
            grid-auto-rows: minmax(44px, auto) !important;
            gap: 16px !important;
        }

            /* Make .span-full use only one column so the grid fills 2x5 */
            .filter-grid .span-full {
                grid-column: auto !important;
            }

            /* Make sure inputs/selects fit and occupy their single grid cell */
            .filter-grid .form-group input,
            .filter-grid .form-group .custom-select,
            .filter-grid .form-group .select-trigger {
                width: 100% !important;
                box-sizing: border-box !important;
            }

            /* Make filter inputs/selects more flexible and allow grid cells to shrink */
            .filter-grid,
            .filter-grid .form-group,
            .filter-grid .form-group * {
                min-width: 0 !important;
            }

                .filter-grid .form-group {
                    width: 100% !important;
                    display: flex !important;
                    flex-direction: column !important;
                    box-sizing: border-box !important;
                }

                    .filter-grid .form-group .input-wrapper,
                    .filter-grid .form-group .custom-select,
                    .filter-grid .form-group input,
                    .filter-grid .form-group .select-trigger {
                        min-width: 0 !important;
                        max-width: 100% !important;
                        width: 100% !important;
                    }

                    /* allow select-trigger to grow/shrink inside its wrapper */
                    .filter-grid .form-group .select-trigger {
                        display: flex !important;
                        align-items: center !important;
                        gap: 6px !important;
                        justify-content: space-between !important;
                    }

                    /* Make sure date input's right icon does not push width */
                    .filter-grid .form-group .date-wrapper input[type="date"] {
                        /* padding-right: 40px !important; */
                        width: 100% !important;
                        box-sizing: border-box !important;
                    }
    }

    .close-filter-sidebar:hover {
        background: #eaecf0;
    }

    /* Filter sidebar disabled on mobile/tablet */
    .filter-sidebar.mobile-open {
        display: none !important;
    }

        .filter-sidebar.mobile-open::before {
            content: "" !important;
            display: block !important;
            width: 40px !important;
            height: 4px !important;
            background: #d0d5dd !important;
            border-radius: 4px !important;
            margin: 8px auto 0 auto !important;
        }

    /* Custom Dropdowns as Bottom Sheet on Mobile/Tablet inside Sidebar
       NOTE: Only apply bottom-sheet behavior when the dropdown has `.bottom-sheet`.
       This avoids forcing all filter/modal dropdowns to appear pinned to the bottom. */
    .filter-sidebar .custom-dropdown.bottom-sheet .dropdown-list,
    .modal-body .custom-dropdown.bottom-sheet .dropdown-list {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-height: 50vh !important;
        border-radius: 16px 16px 0 0 !important;
        z-index: 2000 !important;
        /* Higher than sidebar/modal */
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2) !important;
        animation: bottomSheetSlideUp 0.25s ease-out !important;
        overflow-y: auto !important;
        border: none !important;
    }

    .filter-sidebar .dropdown-item,
    .modal-body .dropdown-item {
        padding: 16px 20px !important;
        font-size: 15px !important;
        border-bottom: 1px solid #f2f4f7 !important;
    }
}

/* ============================================================
   NOTIFICATION PANEL RESPONSIVE STYLES
   ============================================================ */

/* Mobile Notification Panel - Full Screen */
@media screen and (max-width: 767px) {
    .notification-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        z-index: 1100 !important;
        background: #ffffff !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }

        .notification-modal .modal-body {
            height: 100% !important;
            overflow-y: auto !important;
            padding: 0 !important;
        }

        /* Add header to notification modal on mobile */
        .notification-modal::before {
            content: "Notifications";
            display: block;
            position: sticky;
            top: 0;
            left: 0;
            right: 0;
            background: #ffffff;
            padding: 16px 20px;
            font-family: "Inter", sans-serif;
            font-size: 18px;
            font-weight: 600;
            color: #1a1a1a;
            border-bottom: 1px solid #e4e7ec;
            z-index: 10;
        }

        /* Add close button to notification modal on mobile */
        .notification-modal::after {
            content: "×";
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            top: 12px;
            right: 16px;
            width: 32px;
            height: 32px;
            font-size: 28px;
            color: #3c4044;
            cursor: pointer;
            z-index: 11;
            background: transparent;
            border: none;
            line-height: 1;
        }

    .notification-list {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

        .notification-list li {
            display: flex !important;
            align-items: flex-start !important;
            padding: 16px 20px !important;
            border-bottom: 1px solid #f2f4f7 !important;
            gap: 12px !important;
        }

            .notification-list li .icon {
                flex-shrink: 0 !important;
                width: 32px !important;
                height: 32px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }

                .notification-list li .icon img {
                    width: 24px !important;
                    height: 24px !important;
                }

            .notification-list li .notification-content {
                flex: 1 !important;
                display: flex !important;
                flex-direction: column !important;
                gap: 4px !important;
            }

                .notification-list li .notification-content p {
                    font-family: "Inter", sans-serif !important;
                    font-size: 13px !important;
                    line-height: 1.5 !important;
                    color: #49454f !important;
                    margin: 0 !important;
                    word-wrap: break-word !important;
                }

                .notification-list li .notification-content .timestamp {
                    font-family: "Inter", sans-serif !important;
                    font-size: 12px !important;
                    color: #98a2b3 !important;
                    margin-top: 4px !important;
                }

    /* Hide notification icon on mobile - show in hamburger menu instead */
    .notification-icon {
        display: none !important;
    }
}

/* Tablet View */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .notification-modal {
        position: fixed !important;
        top: 60px !important;
        right: 10px !important;
        left: auto !important;
        width: 400px !important;
        max-width: calc(100vw - 20px) !important;
        height: auto !important;
        max-height: calc(100vh - 80px) !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
        overflow: hidden !important;
    }

        .notification-modal .modal-body {
            max-height: calc(100vh - 140px) !important;
            overflow-y: auto !important;
        }

    .notification-list li {
        padding: 14px 16px !important;
    }

        .notification-list li .notification-content p {
            font-size: 13px !important;
        }
}

/* ============================================================
   NOTIFICATION PANEL RESPONSIVE STYLES
   ============================================================ */

/* Desktop notification styles */
.notification-modal {
    position: absolute;
    top: calc(100% + 10px);
    right: -20px;
    width: 480px;
    max-width: 90vw;
    height: auto;
    max-height: 600px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    overflow: hidden;
    display: none;
}

    .notification-modal[style*="display: flex"],
    .notification-modal[style*="display: block"] {
        display: flex !important;
        flex-direction: column;
    }

    .notification-modal .modal-header {
        flex-shrink: 0;
    }

    .notification-modal .modal-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        max-height: 500px;
        padding: 0;
    }

.notification-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .notification-list li {
        display: flex;
        gap: 12px;
        padding: 16px;
        border-bottom: 1px solid #f2f4f7;
        transition: background-color 0.2s ease;
    }

        .notification-list li:hover {
            background-color: #f9fafb;
        }

        .notification-list li:last-child {
            border-bottom: none;
        }

    .notification-list .icon {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding-top: 4px;
    }

        .notification-list .icon img {
            width: 24px;
            height: 24px;
        }

.notification-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .notification-content p {
        margin: 0;
        font-size: 13px;
        line-height: 1.5;
        color: #344054;
        font-family: "Inter", sans-serif;
    }

    .notification-content .timestamp {
        font-size: 12px;
        color: #98a2b3;
        font-weight: 400;
    }

/* Tablet View (768px - 1024px) */
@media screen and (max-width: 1024px) {
    .notification-modal {
        width: 360px;
        max-height: 450px;
    }

    .notification-list li {
        padding: 14px;
    }

    .notification-content p {
        font-size: 13px;
    }
}

/* Mobile View (max-width: 767px) */
@media screen and (max-width: 767px) {
    /* Full-screen notification panel on mobile */
    .notification-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
        z-index: 1100;
    }

        /* Add header to notification modal on mobile */
        .notification-modal::before {
            content: "Notifications";
            display: block;
            padding: 16px 20px;
            font-size: 18px;
            font-weight: 600;
            color: #1a1a1a;
            border-bottom: 1px solid #e4e7ec;
            background: #ffffff;
            font-family: "Inter", sans-serif;
        }

        /* Add close button to notification modal on mobile */
        .notification-modal::after {
            content: "×";
            position: absolute;
            top: 12px;
            right: 16px;
            font-size: 32px;
            font-weight: 400;
            color: #757d85;
            cursor: pointer;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            z-index: 10;
        }

        .notification-modal .modal-body {
            max-height: calc(100vh - 60px);
            padding-top: 0;
        }

    .notification-list {
        padding: 0;
    }

        .notification-list li {
            padding: 16px 20px;
            border-bottom: 1px solid #f2f4f7;
        }

        .notification-list .icon {
            width: 28px;
            height: 28px;
        }

            .notification-list .icon img {
                width: 20px;
                height: 20px;
            }

    .notification-content p {
        font-size: 14px;
        line-height: 1.6;
    }

    .notification-content .timestamp {
        font-size: 12px;
        margin-top: 4px;
    }

    /* Overlay for mobile notification */
    .notification-icon.active::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1099;
    }
}

/* Extra Small Mobile (max-width: 375px) */
@media screen and (max-width: 375px) {
    .notification-modal::before {
        padding: 14px 16px;
        font-size: 16px;
    }

    .notification-modal::after {
        top: 10px;
        right: 12px;
        font-size: 28px;
    }

    .notification-list li {
        padding: 14px 16px;
        gap: 10px;
    }

    .notification-list .icon {
        width: 24px;
        height: 24px;
    }

        .notification-list .icon img {
            width: 18px;
            height: 18px;
        }

    .notification-content p {
        font-size: 13px;
    }

    .notification-content .timestamp {
        font-size: 11px;
    }
}

/* -----------------------------
     Modal & Form Responsive Improvements
     - Ensure form rows stack on small screens
     - Make multiple-stops columns collapse to single column on mobile
     - Align weight inputs and labels for various breakpoints
------------------------------ */

@media (max-width: 1024px) {
    /* Make modal content slightly narrower and allow form rows to wrap */
    .modal-content,
    .modal-overlay .modal-content,
    #modalOverlay .modal-content {
        max-width: 100% !important;
    }

    .modal-body .form-row {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .modal-body .form-group {
        flex: 1 1 48% !important;
        min-width: 220px !important;
    }

    /* Multiple stops become two stacked columns that can wrap */
    .multiple-stops-columns {
        display: flex !important;
        gap: 16px !important;
        flex-wrap: wrap !important;
    }

    .stops-column {
        flex: 1 1 48% !important;
        min-width: 260px !important;
    }

    .stop-row {
        display: flex !important;
        gap: 8px !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    .stop-weight-group {
        flex: 0 0 96px !important;
        max-width: 96px !important;
    }

    .stop-input-group {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
}

@media (max-width: 600px) {
    /* Mobile: stack everything vertically for easy tapping */
    .modal-content,
    .modal-overlay .modal-content,
    #modalOverlay .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    .modal-body .form-row {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .modal-body .form-group {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    /* Multiple stops: each stop-row stacks input above weight */
    .multiple-stops-columns {
        display: block !important;
    }

    .stops-column {
        width: 100% !important;
        margin-bottom: 12px !important;
    }

    .stop-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        align-items: center !important;
    }

    .stop-input-group input,
    .stop-weight-group input {
        width: 100% !important;
        height: 42px !important;
        box-sizing: border-box !important;
    }

    .stop-weight-group {
        flex: 0 0 96px !important;
        max-width: 96px !important;
        width: auto !important;
    }

    /* Ensure the row reserves space for delete button on mobile */
    .stop-row {
        position: relative !important;
        padding-right: 48px !important;
        /* reserve room for delete icon */
    }

    .stop-weight-group .delete-row-btn {
        width: 36px !important;
        height: 36px !important;
        position: absolute !important;
        right: 6px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        transform-origin: center !important;
        padding: 0 !important;
    }

    /* Make truck / payment / required trucks fields full width */
    .truck-row .form-group,
    .multiple-stops-truck-row .form-group,
    .one-stop-fields .form-group {
        flex: 1 1 100% !important;
    }

    .dropdown-header,
    .modal-body .form-group input,
    .modal-body .form-group select {
        width: 100% !important;
    }

    /* Increase tappable area for add/delete buttons */
    .add-more-address-button,
    .delete-row-btn {
        padding: 10px 12px !important;
        /* keep add-more address bigger; delete button will be overridden by its own rule */
    }
}

/* -----------------------------
     Mobile & Tablet Improvements
     - Stack filter columns into single column on small screens
     - Make inputs and dropdowns full-width and easier to tap
     - Improve spacing and touch targets for tablet/mobile
------------------------------ */

@media (max-width: 1024px) {
    /* Make the filter form grid stack on tablet */
    .filter-form-grid {
        display: block !important;
        gap: 0 !important;
        padding: 12px 16px !important;
    }

    .filter-column-left,
    .filter-column-right {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 0 12px 0 !important;
    }

    .filter-form-group,
    .filter-group {
        width: 100% !important;
        margin-bottom: 14px !important;
    }

    .filter-row {
        display: flex;
        flex-direction: row;
        gap: 12px;
        flex-wrap: wrap;
    }

        .filter-row .filter-group {
            flex: 1 1 48% !important;
            /* two columns where space allows */
            min-width: 200px;
        }

            /* Full width for single-column stacked groups */
            .filter-form-group.full-width,
            .filter-row .filter-group.full-width {
                flex-basis: 100% !important;
            }

    /* Make dropdown header and inputs more touch-friendly */
    .dropdown-header,
    .filter-group input,
    .filter-group textarea,
    .filter-group .date-range-input-wrapper input[type="text"],
    .filter-group input[type="date"] {
        width: 100% !important;
        padding: 12px 14px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
    }

    .custom-dropdown .dropdown-list {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        box-sizing: border-box !important;
        max-height: 260px !important;
        overflow: auto !important;
    }

    .apply-filter-button,
    .filter-apply-btn,
    .filter-clear-btn {
        width: 100% !important;
        box-sizing: border-box;
    }
}

@media (max-width: 600px) {
    /* Mobile specific adjustments */
    .filter-row .filter-group {
        flex: 1 1 100% !important;
        /* always single column on small screens */
    }

    .filter-header {
        padding: 14px 16px !important;
    }

        .filter-header h3 {
            font-size: 20px !important;
            margin: 0 0 8px 0 !important;
        }

    .dropdown-header {
        padding: 14px 16px !important;
        font-size: 16px !important;
    }

    /* Increase tappable area for dropdown items */
    .dropdown-item {
        padding: 12px 16px !important;
        font-size: 15px !important;
    }

    /* Sidebar should occupy full width on mobile */
    .filter-sidebar {
        width: 100% !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        overflow: auto !important;
        border-radius: 0 !important;
        padding-bottom: 28px !important;
    }

    /* Make action buttons larger and full width */
    .filter-actions,
    .filter-actions .filter-apply-btn,
    .filter-actions .filter-clear-btn {
        display: block !important;
        width: 100% !important;
    }

    /* Improve spacing inside modals and filter modal */
    .filter-modal-content,
    .modal-body {
        padding: 16px !important;
    }
}

/* Accessibility / visual tweaks for smaller tablets (in-between) */
@media (min-width: 601px) and (max-width: 900px) {
    .filter-row .filter-group {
        flex: 1 1 48% !important;
    }

    .dropdown-item {
        padding: 10px 14px !important;
    }
}

/* ============================================================
   NOTIFICATION PANEL RESPONSIVE STYLES
   ============================================================ */

/* Mobile Notification Panel - Full Screen Drawer */
@media screen and (max-width: 1024px) {
    /* Show notification icon on tablet and mobile */
    .notification-icon {
        display: flex !important;
        order: 1 !important;
    }

    /* Transform notification modal into full-screen drawer */
    .notification-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        background: #ffffff !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        z-index: 1100 !important;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        overflow-y: auto;
    }

        .notification-modal[style*="display: block"],
        .notification-modal.show {
            transform: translateX(0) !important;
        }

        /* Notification modal header */
        .notification-modal::before {
            content: "Notifications";
            display: block;
            padding: 16px 20px;
            font-family: "Inter", sans-serif;
            font-size: 18px;
            font-weight: 600;
            color: #1a1a1a;
            border-bottom: 1px solid #e4e7ec;
            position: sticky;
            top: 0;
            background: #ffffff;
            z-index: 10;
        }

        /* Close button for mobile notification panel */
        .notification-modal::after {
            content: "×";
            position: fixed;
            top: 12px;
            right: 16px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: #667085;
            cursor: pointer;
            z-index: 11;
            background: transparent;
            border: none;
        }

        /* Notification modal body */
        .notification-modal .modal-body {
            padding: 0 !important;
            margin: 0 !important;
        }

    /* Notification list */
    .notification-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .notification-list li {
            display: flex;
            gap: 12px;
            padding: 16px 20px;
            border-bottom: 1px solid #f2f4f7;
            align-items: flex-start;
        }

            .notification-list li:last-child {
                border-bottom: none;
            }

            /* Notification icon */
            .notification-list li .icon {
                flex-shrink: 0;
                width: 32px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

                .notification-list li .icon img {
                    width: 24px;
                    height: 24px;
                }

    /* Notification content */
    .notification-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

        .notification-content p {
            margin: 0;
            font-family: "Inter", sans-serif;
            font-size: 14px;
            line-height: 1.5;
            color: #344054;
        }

        .notification-content .timestamp {
            font-size: 12px;
            color: #98a2b3;
            margin-top: 4px;
        }

    /* Notification count badge */
    .notification-count {
        position: absolute;
        top: -4px;
        right: -4px;
        background: #ff4444;
        color: white;
        font-size: 10px;
        font-weight: 600;
        border-radius: 50%;
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid white;
    }
}

/* Notification bell icon size */
img.bell-icon {
    width: 22px;
    height: 22px;
    display: inline-block;
}

/* Mobile specific (max-width: 767px) */
@media screen and (max-width: 767px) {
    .notification-modal::before {
        font-size: 16px;
        padding: 14px 16px;
    }

    .notification-list li {
        padding: 14px 16px;
    }

    .notification-content p {
        font-size: 13px;
    }

    .notification-content .timestamp {
        font-size: 11px;
    }
}

/* Override multiple-stops grid templates for tablet and mobile */
@media (max-width: 1024px) {
    .multiple-stops-form-row {
        grid-template-columns: repeat(2, 1fr) !important;
        /* 2 columns on tablet */
    }

        .multiple-stops-form-row .form-group {
            width: 100% !important;
        }

    .multiple-stops-truck-row {
        grid-template-columns: 1fr 1fr 1fr !important;
        /* balance columns on tablet */
    }
}

@media (max-width: 600px) {
    .multiple-stops-form-row {
        grid-template-columns: 1fr !important;
        /* single column on mobile */
        gap: 10px !important;
    }

    .multiple-stops-truck-row {
        grid-template-columns: 1fr !important;
        /* stack truck/payment fields */
        gap: 10px !important;
    }

        .multiple-stops-form-row .form-group,
        .multiple-stops-truck-row .form-group {
            width: 100% !important;
        }
}

/* Mobile/tablet forms: 2x2 schedule group and 2x3 toggles within modal */
@media (max-width: 900px) {
    /* Make 3-column rows usable in a 2-column mobile grid */
    #createLoadModalOverlay .form-row.three-col {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 12px 12px;
    }

        /* Ensure the third group (Bidding Time) spans full width and its internal selects become 2 columns */
        #createLoadModalOverlay .form-row.three-col .form-group:nth-child(3) {
            grid-column: 1 / 3;
        }

        #createLoadModalOverlay .form-row.three-col .time-select-group {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

            #createLoadModalOverlay
            .form-row.three-col
            .time-select-group
            .custom-select.small {
                width: 100%;
            }

    /* Toggle areas: stack the two sections vertically, and keep toggle buttons in one horizontal row per section */
    #createLoadModalOverlay .form-row.two-col-layout {
        display: flex !important;
        flex-direction: column;
        gap: 12px;
    }

    /* Make each form section take full width and place label above toggles */
    #createLoadModalOverlay .form-section {
        display: block;
        width: 100%;
    }

        #createLoadModalOverlay .form-section .toggle-buttons {
            display: flex;
            gap: 8px;
            flex-wrap: wrap !important;
            align-items: center;
            height: auto !important;
            -webkit-overflow-scrolling: touch;
        }

    #createLoadModalOverlay .toggle-buttons .toggle-btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Ensure checkbox shows on its own line under Load Post For */
    #createLoadModalOverlay #loadPostForToggle .checkbox-row {
        display: block;
        margin-top: 8px;
    }

    /* Keep checkbox aligned inline with toggles - remove extra top padding for single-line layout */
    #createLoadModalOverlay .checkbox-row {
        padding-top: 0 !important;
    }

    /* Move delete button a little to the right so it does not sit against the weight input */
    .stop-delete-wrapper .delete-row-btn {
        margin-left: 12px !important;
    }
}

/* Create Load Request modal footer: mobile-specific 1x2 layout */
@media (max-width: 480px) {
    #createLoadModalOverlay .modal-footer {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 12px 16px;
    }

        #createLoadModalOverlay .modal-footer .btn-cancel,
        #createLoadModalOverlay .modal-footer .btn-create {
            width: 100%;
            min-height: 44px;
            padding: 10px 16px;
            box-sizing: border-box;
        }

        /* Make sure cancel is visually subdued and Create is emphasized on mobile */
        #createLoadModalOverlay .modal-footer .btn-cancel {
            background: transparent;
            color: var(--cancel-text, rgba(255, 16, 0, 0.6));
            border: 1px solid rgba(60, 64, 68, 0.08);
        }

        #createLoadModalOverlay .modal-footer .btn-create {
            background: var(--primary, #519e8a);
            color: #ffffff;
            border: none;
            box-shadow: none;
        }
}

/* Create Load Request modal footer: ensure 1x2 layout on tablet and desktop as well */
@media (min-width: 481px) and (max-width: 1024px) {
    #createLoadModalOverlay .modal-footer.create-footer {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        justify-content: space-between !important;
    }

        #createLoadModalOverlay .modal-footer.create-footer .btn-cancel,
        #createLoadModalOverlay .modal-footer.create-footer .btn-create {
            width: 48% !important;
            min-height: 44px !important;
        }
}

/* Desktop: default row layout already applies; ensure create-footer maintains widths */
@media (min-width: 1025px) {
    #createLoadModalOverlay .modal-footer.create-footer {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        justify-content: flex-end !important;
    }

        /* Desktop: show Cancel first, then Create */
        #createLoadModalOverlay .modal-footer.create-footer .btn-cancel {
            order: 1;
            /* Cancel first */
            margin-right: 8px !important;
            /* spacing before Create */
        }

        #createLoadModalOverlay .modal-footer.create-footer .btn-create {
            order: 2;
            /* Create second */
            margin-left: 0 !important;
        }
}

/* Mobile: break post-meta into multiple lines */
@media screen and (max-width: 767px) {
    .post-meta .meta-left,
    .post-meta .meta-right {
        display: block !important;
        width: 100% !important;
    }

    .post-meta .meta-right {
        margin-top: 6px !important;
    }

    .post-meta .meta-sep {
        display: none !important;
    }
}

/* Ensure filter icon in the tabs/search area stays visible and not absolutely positioned */
.tabs-and-search-container .filter-icon.mobile-kebab-menu {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    display: flex !important;
    z-index: 30 !important;
}

/* Make filter icon visible on tablet widths as well */
@media screen and (min-width: 576px) and (max-width: 1024px) {
    .tabs-and-search-container .filter-icon {
        display: flex !important;
    }
}

/* Small screens: ensure filter icon has proper sizing */
@media screen and (max-width: 480px) {
    .tabs-and-search-container .filter-icon {
        width: 40px !important;
        height: 40px !important;
        padding: 6px !important;
    }

        .tabs-and-search-container .filter-icon img {
            width: 20px !important;
            height: 20px !important;
        }
}

/* Tablet / Desktop: keep tabs and search on one row (no wrapping) */
@media screen and (min-width: 768px) {
    .tabs-and-search-container {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

        .tabs-and-search-container .search-and-actions {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
        }

        /* Make search bar flexible: grows and shrinks with available space */
        .tabs-and-search-container .search-bar {
            display: flex !important;
            flex: 1 1 320px !important;
            /* grow, shrink, base */
            min-width: 180px !important;
            max-width: 640px !important;
        }

        /* Tabs should take only needed space */
        .tabs-and-search-container .tabs {
            flex: 0 1 auto !important;
            margin-right: 12px !important;
        }

        /* Keep search/actions grouped */
        .tabs-and-search-container .search-and-actions {
            flex: 0 1 auto !important;
        }
}

/* Confirmation text: allow wrapping instead of truncation */
.confirmation-text {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    hyphens: auto !important;
}

/* Ensure small-modal confirmation text also wraps and has readable sizing */
.small-modal .confirmation-text {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    hyphens: auto !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
}

/* Add left and right dividers to the details panel across all viewports */
.details-section {
    border-left: 1px solid var(--border, #e4e7ec) !important;
    border-right: 1px solid var(--border, #e4e7ec) !important;
    box-sizing: border-box !important;
}

/* Post header: white background with top rounded corners */
.post-header {
    background: #ffffff !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    border-bottom: none !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06) !important;
    position: relative !important;
}

/* Remove white background on desktop view (override) */
@media screen and (min-width: 1024px) {
    .post-header {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }
}

/* Make inner .post-meta transparent to avoid double borders */
.post-meta {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Left-align modal titles (override center alignment) */
.modal-header h2 {
    text-align: left !important;
    flex: 0 0 auto !important;
    margin-right: 16px !important;
}

/* Fulfill modal: ensure details use black text for labels and values */
.fulfill-details-grid,
.fulfill-details-grid .fulfill-detail-item,
.fulfill-details-grid .fulfill-label,
.fulfill-details-grid .fulfill-value {
    color: #000000 !important;
}

/* Force black text for bid details (bid card list / modal) */
.bid-card-details,
.bid-card-details * {
    color: #000000 !important;
}

    .bid-card-details .bid-label {
        color: rgba(0, 0, 0, 0.9) !important;
        font-weight: 500 !important;
    }

/* Hide the decorative ::before on the extend-bid small modal (desktop + mobile) */
.modal-content.small-modal.extended-modal.extend-bid-modal::before {
    display: none !important;
    content: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.bid-card-details .bid-value {
    color: #000000 !important;
    font-weight: 600 !important;
}

/* Extend-bid modal: make controls and footer full width */
.modal-content.extend-bid-modal {
    text-align: left !important;
}

.extend-bid-modal .modal-body {
    width: 100% !important;
}

.extend-bid-modal .time-selects {
    display: flex !important;
    gap: 16px !important;
    width: 100% !important;
    align-items: center !important;
}

    .extend-bid-modal .time-selects .custom-dropdown {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    .extend-bid-modal .time-selects .dropdown-header {
        width: 100% !important;
        box-sizing: border-box !important;
    }

.extend-bid-modal .modal-footer.extend-bid-footer {
    display: flex !important;
    gap: 16px !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 12px 0 0 0 !important;
    box-sizing: border-box !important;
}

    .extend-bid-modal .modal-footer.extend-bid-footer .cancel-button,
    .extend-bid-modal .modal-footer.extend-bid-footer .create-button {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    .extend-bid-modal .modal-footer.extend-bid-footer .create-button {
        max-width: none !important;
        padding: 12px 16px !important;
        border-radius: 28px !important;
    }

/* On very small screens keep spacing comfortable */
@media screen and (max-width: 400px) {
    .extend-bid-modal .time-selects {
        flex-direction: column !important;
    }

    .extend-bid-modal .modal-footer.extend-bid-footer {
        flex-direction: column-reverse !important;
        gap: 10px !important;
    }

        .extend-bid-modal .modal-footer.extend-bid-footer .cancel-button,
        .extend-bid-modal .modal-footer.extend-bid-footer .create-button {
            width: 100% !important;
        }
}

/* 2x2 layout: label (full width) then two selects side-by-side, then two footer buttons side-by-side */
.extend-bid-modal .form-group {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 12px 16px !important;
    align-items: start !important;
}

    .extend-bid-modal .form-group > label {
        grid-column: 1 / -1 !important;
        margin-bottom: 4px !important;
    }

    .extend-bid-modal .form-group .time-selects {
        display: grid !important;
        grid-column: 1 / -1 !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        width: 100% !important;
    }

        .extend-bid-modal .form-group .time-selects .custom-dropdown {
            width: 100% !important;
        }

/* Footer as 2 columns */
.extend-bid-modal .modal-footer.extend-bid-footer {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    align-items: center !important;
}

    .extend-bid-modal .modal-footer.extend-bid-footer .cancel-button,
    .extend-bid-modal .modal-footer.extend-bid-footer .create-button {
        width: 100% !important;
        justify-self: stretch !important;
    }

/* Keep stacking on very narrow screens */
@media screen and (max-width: 360px) {
    .extend-bid-modal .form-group {
        grid-template-columns: 1fr !important;
    }

        .extend-bid-modal .form-group .time-selects {
            grid-template-columns: 1fr !important;
        }

    .extend-bid-modal .modal-footer.extend-bid-footer {
        grid-template-columns: 1fr !important;
    }
}

/* Dropdown rendering fixes for extend-bid modal */
.extend-bid-modal {
    overflow: visible !important;
    /* allow dropdowns to escape modal box */
}

    .extend-bid-modal .modal-body {
        overflow: visible !important;
    }

    .extend-bid-modal .custom-dropdown {
        position: relative !important;
        z-index: 1 !important;
    }

        .extend-bid-modal .custom-dropdown .dropdown-list {
            position: absolute !important;
            left: 0 !important;
            right: 0 !important;
            top: calc(100% + 8px) !important;
            bottom: auto !important;
            width: 100% !important;
            min-width: 0 !important;
            max-height: 260px !important;
            overflow-y: auto !important;
            background: #ffffff !important;
            border: 1px solid var(--border, #e4e7ec) !important;
            border-radius: 8px !important;
            box-shadow: 0 8px 20px rgba(16, 24, 40, 0.08) !important;
            display: none !important;
            z-index: 2200 !important;
            /* place above modal chrome */
        }

            .extend-bid-modal .custom-dropdown .dropdown-list.open {
                display: block !important;
            }

            .extend-bid-modal .custom-dropdown .dropdown-list.open-up {
                top: auto !important;
                bottom: calc(100% + 8px) !important;
                display: block !important;
            }

        .extend-bid-modal .custom-dropdown .dropdown-item {
            padding: 8px 12px !important;
            white-space: nowrap !important;
        }

    /* Ensure dropdown-arrow sits above list control (if rotated) */
    .extend-bid-modal .dropdown-header {
        position: relative !important;
        z-index: 2300 !important;
    }

/* Mobile: equalize height of search, excel and filter controls */
@media screen and (max-width: 767px) {
    .tabs-and-search-container .search-and-actions {
        display: flex !important;
        gap: 8px !important;
        align-items: center !important;
    }

    .tabs-and-search-container .search-bar,
    .tabs-and-search-container .excel-icon,
    .tabs-and-search-container .filter-icon {
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
        padding: 0 8px !important;
    }

        .tabs-and-search-container .search-bar input {
            height: 32px !important;
            line-height: 32px !important;
            padding: 6px 10px !important;
            box-sizing: border-box !important;
            width: 100% !important;
        }

    .tabs-and-search-container .excel-icon,
    .tabs-and-search-container .filter-icon {
        justify-content: center !important;
    }

        .tabs-and-search-container .excel-icon img,
        .tabs-and-search-container .filter-icon img {
            height: 28px !important;
            width: auto !important;
            display: block !important;
        }

    /* Ensure tabs remain above and search/actions align nicely */
    .tabs-and-search-container .tabs {
        width: 100% !important;
    }
}

/* Make action button icons match text color on hover/focus */
.card-actions-overflow .action-button img {
    transition: filter 0.15s ease, opacity 0.15s ease;
}

.card-actions-overflow .action-button:hover,
.card-actions-overflow .action-button:focus {
    color: #519e8a !important;
}

    .card-actions-overflow .action-button:hover img,
    .card-actions-overflow .action-button:focus img {
        filter: invert(56%) sepia(68%) saturate(399%) hue-rotate(106deg) brightness(91%) contrast(88%) !important;
    }

    /* Also handle inline SVGs and font icons */
    .card-actions-overflow .action-button:hover svg path,
    .card-actions-overflow .action-button:focus svg path,
    .card-actions-overflow .action-button:hover i,
    .card-actions-overflow .action-button:focus i {
        color: #519e8a !important;
        fill: #519e8a !important;
        stroke: #519e8a !important;
    }

/* Desktop: make the confirmed actions bar auto-size to its grid area
   and follow the widths of the confirmed details / info columns */
@media screen and (min-width: 1024px) {
    .card-actions-overflow-confirmed {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        gap: 8px !important;
        justify-self: end !important;
        /* keep the actions pinned to the right column */
        align-self: start !important;
    }

    /* Slightly increase middle/right column min widths so action bar adapts
       when those columns grow/shrink */
    .load-post-card.confirmed-card .card-body {
        grid-template-columns: minmax(220px, 1fr) minmax(260px, 1fr) 455px !important;
    }

    /* For non-confirmed cards, use a fixed third-column width similar to laptop
       so bidding sections and action cards align to the right consistently. */
    .load-post-card .card-body {
        grid-template-columns: minmax(220px, 1fr) minmax(260px, 1fr) 455px !important;
    }
}

/* Confirmed actions: show divider between menu items and apply hover to icon + text */

/* Inline confirmed actions - compact layout with vertical dividers */
.card-actions-overflow-confirmed {
    gap: 0 !important;
}

    .card-actions-overflow-confirmed .confirmed-action-btn {
        transition: color 0.15s ease, background 0.15s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px !important;
        background: transparent;
        border: none;
    }

        .card-actions-overflow-confirmed .confirmed-action-btn .icon img {
            transition: filter 0.15s ease, opacity 0.15s ease;
        }

        /* Use a left border on buttons that follow another button to act as a vertical divider */
        .card-actions-overflow-confirmed .confirmed-action-btn + .confirmed-action-btn {
            border-left: 1px solid var(--border-light, #f0f2f5) !important;
            padding-left: 16px !important;
            /* space after divider */
        }

        .card-actions-overflow-confirmed .confirmed-action-btn:hover,
        .card-actions-overflow-confirmed .confirmed-action-btn:focus {
            color: #519e8a !important;
        }

            .card-actions-overflow-confirmed .confirmed-action-btn:hover .icon img,
            .card-actions-overflow-confirmed .confirmed-action-btn:focus .icon img {
                filter: invert(56%) sepia(68%) saturate(399%) hue-rotate(106deg) brightness(91%) contrast(88%) !important;
            }

/* Reduce desktop header height slightly and adjust offsets */
@media screen and (min-width: 1024px) {
    header {
        height: 72px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    main {
        margin-top: 70px !important;
    }

    /* Align dropdown/overlay top positions with new header height */
    .notification-modal,
    .profile-dropdown,
    .more-dropdown,
    .mobile-nav-drawer {
        top: 72px !important;
    }
}

/* Action cards layout: two separate rows (top & bottom) with 3 columns on tablet/desktop */
.action-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    width: 100%;
}

.action-cards-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    justify-items: center;
    box-sizing: border-box;
    justify-content: center;
}

    .action-cards-row .action-card {
        width: 100%;
        max-width: 320px;
    }

/* Tablet and desktop: 3 columns per row */
@media (min-width: 768px) {
    .action-cards-row {
        grid-template-columns: repeat(3, 1fr);
        max-width: 700px;
        /* match surrounding container */
        gap: 30px;
    }

        .action-cards-row .action-card {
            max-width: none;
            width: auto;
        }
}

@media (min-width: 1025px) {
    .action-cards-row {
        grid-template-columns: repeat(3, 1fr);
        max-width: 800px;
        gap: 20px;
    }
}

/* Mobile: use two vertical columns — left column = top row items, right column = bottom row items */
@media (max-width: 767px) {
    .action-cards-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        width: 100%;
        align-items: start;
    }

    .action-cards-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100%;
        box-sizing: border-box;
    }

        .action-cards-row .action-card {
            width: 100%;
            max-width: none;
        }

    /* Make sure cards remain visually consistent (pills) */
    .action-card {
        justify-content: flex-start;
    }
}

/* Fix desktop bottom cutoff: allow vertical scrolling and add bottom padding */
@media screen and (min-width: 1025px) {
    html,
    body {
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* Ensure main content can grow and won't be clipped */
    main,
    .main-content,
    .empty-state-main {
        min-height: calc(100vh - var(--header-height-desktop, 80px)) !important;
        height: auto !important;
        overflow: visible !important;
        /*    padding-bottom: 96px !important;*/
        /* room for any fixed footer or controls */
    }

    /* Ensure the what-else section has adequate bottom spacing */
    /*  .what-else-can-do {
    margin-bottom: 48px !important;
  }*/
}

/* ============================================================
   CONFIRMED POSTS - COMPACT VIEW OVERRIDES
   Ensuring compact styles override any conflicting responsive rules
   ============================================================ */

/* Override height: 292px with auto for confirmed sections */
.confirmed-details-section,
.confirmed-info-section {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

/* Override fixed height: 284px for location section in confirmed posts */
.card-body-confirmed .location-section {
    height: auto !important;
    min-height: auto !important;
}

/* Ensure compact padding for all confirmed post sections */
.card-body-confirmed .confirmed-details-section,
.card-body-confirmed .confirmed-info-section {
    padding: 10px 12px !important;
    gap: 8px !important;
}

/* Ensure tablet view uses grid layout */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .card-body-confirmed {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
    }

        .card-body-confirmed .location-section,
        .card-body-confirmed .confirmed-details-section,
        .card-body-confirmed .confirmed-info-section {
            height: auto !important;
            padding: 10px 12px !important;
        }
}

/* Ensure mobile view stacks vertically */
@media screen and (max-width: 767px) {
    .card-body-confirmed {
        display: flex !important;
        flex-direction: column !important;
    }

        .card-body-confirmed .location-section {
            height: auto !important;
            padding: 10px 12px !important;
            border-bottom: 1px solid #e4e7ec !important;
        }

        .card-body-confirmed .confirmed-details-section,
        .card-body-confirmed .confirmed-info-section {
            height: auto !important;
            padding: 10px 12px !important;
            border-bottom: 1px solid #e4e7ec !important;
        }
}

/* ============================================================
   CONFIRMED POST MODALS - BOTTOM SHEET RESPONSIVE STYLES
   Applies to: Create Freight Memo, Upload Invoice, Vehicle Details,
              View Documents, View POD
   ============================================================ */

/* Tablet View (768px - 1024px) */
@media screen and (max-width: 1024px) {
    /* Common bottom sheet overlay styles */
    .modal-overlay-freight-memo,
    .modal-overlay-upload-invoice,
    .modal-overlay-vehicle-details,
    .modal-overlay-view-documents,
    .modal-overlay-view-pod {
        align-items: flex-end !important;
    }

    /* Common bottom sheet content styles */
    .freight-memo-modal-content,
    .upload-invoice-modal-content,
    .vehicle-details-modal-content,
    .view-documents-modal-content,
    .view-pod-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 90vh !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 20px !important;
        animation: slideUpBottomSheet 0.3s ease-out !important;
    }

    /* Bottom sheet slide-up animation */
    @keyframes slideUpBottomSheet {
        from {
            transform: translateY(100%);
            opacity: 0;
        }

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

    /* Modal header styles */
    .freight-memo-modal-header,
    .upload-invoice-modal-header,
    .vehicle-details-modal-header,
    .view-documents-modal-header,
    .view-pod-modal-header {
        padding-bottom: 16px !important;
    }

        .freight-memo-modal-header h2,
        .upload-invoice-modal-header h2,
        .vehicle-details-modal-header h2,
        .view-documents-modal-header h2,
        .view-pod-modal-header h2 {
            font-size: 18px !important;
        }

    /* Modal body - scrollable */
    .freight-memo-modal-body,
    .upload-invoice-modal-body,
    .vehicle-details-modal-body,
    .view-documents-modal-body,
    .view-pod-modal-body {
        overflow-y: auto !important;
        max-height: calc(90vh - 180px) !important;
        padding: 16px 0 !important;
    }

    /* Upload sections - responsive grid */
    .upload-sections {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    /* Documents sections - responsive grid */
    .documents-sections {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    /* Footer - 2 columns on tablet */
    .freight-memo-modal-footer,
    .upload-invoice-modal-footer {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding-top: 16px !important;
        border-top: 1px solid #e4e7ec !important;
        margin-top: 16px !important;
    }

        .freight-memo-modal-footer .cancel-btn,
        .freight-memo-modal-footer .create-btn,
        .upload-invoice-modal-footer .cancel-upload-btn,
        .upload-invoice-modal-footer .save-invoice-btn {
            width: 100% !important;
            justify-content: center !important;
            padding: 14px 20px !important;
            font-size: 14px !important;
        }
}

/* Mobile View (max-width: 767px) */
@media screen and (max-width: 767px) {
    /* Bottom sheet overlay */
    .modal-overlay-freight-memo,
    .modal-overlay-upload-invoice,
    .modal-overlay-vehicle-details,
    .modal-overlay-view-documents,
    .modal-overlay-view-pod {
        align-items: flex-end !important;
    }

    /* Bottom sheet content */
    .freight-memo-modal-content,
    .upload-invoice-modal-content,
    .vehicle-details-modal-content,
    .view-documents-modal-content,
    .view-pod-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 85vh !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 16px !important;
        animation: slideUpBottomSheet 0.3s ease-out !important;
    }

        /* Drag handle indicator for bottom sheet */
        .freight-memo-modal-content::before,
        .upload-invoice-modal-content::before,
        .vehicle-details-modal-content::before,
        .view-documents-modal-content::before,
        .view-pod-modal-content::before {
            content: "" !important;
            display: block !important;
            width: 40px !important;
            height: 4px !important;
            background: #d1d5db !important;
            border-radius: 2px !important;
            margin: 0 auto 12px !important;
        }

    /* Modal headers */
    .freight-memo-modal-header h2,
    .upload-invoice-modal-header h2,
    .vehicle-details-modal-header h2,
    .view-documents-modal-header h2,
    .view-pod-modal-header h2 {
        font-size: 16px !important;
    }

    /* Modal body - scrollable with reduced max height */
    .freight-memo-modal-body,
    .upload-invoice-modal-body,
    .vehicle-details-modal-body,
    .view-documents-modal-body,
    .view-pod-modal-body {
        overflow-y: auto !important;
        max-height: calc(85vh - 160px) !important;
        padding: 12px 0 !important;
    }

    /* Upload sections - single column on mobile */
    .upload-sections {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .upload-area {
        height: 200px !important;
    }

    .upload-section h3 {
        font-size: 14px !important;
    }

    /* Documents sections - single column on mobile */
    .documents-sections {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Vehicle details grid - single column */
    .vehicle-details-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .vehicle-detail-item {
        flex-direction: row !important;
        justify-content: space-between !important;
    }

    .vehicle-detail-label {
        font-size: 13px !important;
        min-width: unset !important;
    }

    .vehicle-detail-value {
        font-size: 13px !important;
        text-align: right !important;
    }

    /* Freight Memo form fields - full width */
    .memo-form-section .form-group {
        margin-bottom: 14px !important;
    }

    .memo-form-section input,
    .memo-form-section textarea {
        font-size: 14px !important;
    }

    /* Footer - 2 columns on mobile (one row) */
    .freight-memo-modal-footer,
    .upload-invoice-modal-footer {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        padding-top: 14px !important;
        border-top: 1px solid #e4e7ec !important;
        margin-top: 12px !important;
    }

        .freight-memo-modal-footer .cancel-btn,
        .freight-memo-modal-footer .create-btn,
        .upload-invoice-modal-footer .cancel-upload-btn,
        .upload-invoice-modal-footer .save-invoice-btn {
            width: 100% !important;
            justify-content: center !important;
            padding: 12px 16px !important;
            font-size: 13px !important;
            border-radius: 8px !important;
        }

        /* Fix button order - Cancel first, then action button */
        .freight-memo-modal-footer .cancel-btn {
            order: 1 !important;
        }

        .freight-memo-modal-footer .create-btn {
            order: 2 !important;
        }

        .upload-invoice-modal-footer .cancel-upload-btn {
            order: 1 !important;
        }

        .upload-invoice-modal-footer .save-invoice-btn {
            order: 2 !important;
        }

    .custom_message {
        position: fixed;
        bottom: 50px;
        left: 15px;
        z-index: 1;
        max-width: 200px;
    }
}

.alert-danger {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}
.alert-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
}
.alert-warning {
    background-color: rgb(255, 165, 0);
    border-color: #faebcc;
    color: #ffffff;
}
.alert-info {
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #31708f;
}
.alert {
    padding: 9px;
    margin-bottom: 5px;
    position: relative;
    -webkit-box-shadow: 0 5px 5px rgba(255, 78, 0, 0.12156862745098039);
    box-shadow: 0 1px 10px #2f373f;
}