/* Job Booking status colour coding — car-source/status/purchase-type driven card gradients.
   Extracted verbatim from Components/Pages/JobBookings/Jobs/JobsPage.razor's inline <style>
   block (Phase: message-inbox-redesign) so the Messaging Inbox can reuse the exact same
   colours as the Job Booking dashboard (docs/message-inbox-redesign/plan-message-inbox-redesign.md).
   The class string for a given job is built by Components/Shared/Jobs/JobStatusCssClass.cs
   (also used by EventItem.razor) — keep that helper and this stylesheet's selectors in sync.
   Loaded globally via Components/App.razor since these were already unscoped/global rules. */

    /* Phase 6: this page's schedule-board job-card colors are per-category (car make/
       scenario) visual coding, not app surface/text/border tokens -- distinguishing hues
       kept invariant across themes by design (the whole point is a stable visual
       association), same treatment as ConversationTimeline's channel badges (Phase 5).
       Tokenized here as local CSS custom properties (unscoped -- inline style blocks in
       .razor files aren't covered by Blazor's CSS isolation) purely to satisfy "zero hex
       literals"; sequentially named since ~100 distinct decorative shades have no more
       meaningful individual identity than "category N's color". */
    :root {
        --jp-1: #a29c9c;
        --jp-2: #fff;
        --jp-3: #4caf50;
        --jp-4: #E91E63;
        --jp-5: #ddd;
        --jp-6: #ff3448;
        --jp-7: #000;
        --jp-8: #e91e63;
        --jp-9: #444;
        --jp-10: #1f4b9e;
        --jp-11: #3267bc;
        --jp-12: #5a8fd1;
        --jp-13: #7db6e6;
        --jp-14: #4d7fb8;
        --jp-15: #6286c0;
        --jp-16: #82a4d6;
        --jp-17: #a0c3eb;
        --jp-18: #39FF14;
        --jp-19: #FF00FF;
        --jp-20: #bf3086;
        --jp-21: #d870a8;
        --jp-22: #f098c0;
        --jp-23: #bb6197;
        --jp-24: #d88bb0;
        --jp-25: #f3a9cf;
        --jp-26: #b75603;
        --jp-27: #d2804c;
        --jp-28: #e89a6e;
        --jp-29: #b97e4c;
        --jp-30: #d89b6c;
        --jp-31: #e8b28f;
        --jp-32: #640fa5;
        --jp-33: #783ea5;
        --jp-34: #9c61d4;
        --jp-35: #b787e5;
        --jp-36: #10a8a5;
        --jp-37: #56a7a5;
        --jp-38: #89cbc9;
        --jp-39: #a0e2e1;
        --jp-40: #6cab6f;
        --jp-41: #87d18e;
        --jp-42: #a0e7b1;
        --jp-43: #7e7c7c;
        --jp-44: #b1b1b1;
        --jp-45: #d4d4d4;
        --jp-46: #012d72;
        --jp-47: #204070;
        --jp-48: #406080;
        --jp-49: #87a3d6;
        --jp-50: #7c4dbb;
        --jp-51: #9a6fd1;
        --jp-52: #b494e6;
        --jp-53: #8a8a8a;
        --jp-54: #a3a3a3;
        --jp-55: #bcbcbc;
        --jp-56: #0266fb;
        --jp-57: #5597f9;
        --jp-58: #87b8fa;
        --jp-59: #a4ccfd;
        --jp-60: #9004fb;
        --jp-61: #b55afb;
        --jp-62: #d18dfc;
        --jp-63: #e3aefc;
        --jp-64: #03f9f4;
        --jp-65: #5bfdfa;
        --jp-66: #a0fefd;
        --jp-67: #c3fffe;
        --jp-68: #287401;
        --jp-69: #3d7222;
        --jp-70: #5a8f45;
        --jp-71: #7abf67;
        --jp-72: #302424;
        --jp-73: #6e5454;
        --jp-74: #8f7373;
        --jp-75: #a98f8f;
        --jp-76: #6080a0;
        --jp-77: #2c014c;
        --jp-78: #311446;
        --jp-79: #4a2760;
        --jp-80: #6a3d80;
        --jp-81: #015655;
        --jp-82: #185454;
        --jp-83: #2a6d6d;
        --jp-84: #3e8585;
        --jp-85: #005004;
        --jp-86: #194c1b;
        --jp-87: #2f6b35;
        --jp-88: #4b8b55;
        --jp-89: #D3D3D3;
        --jp-90: rgba(98, 134, 192, 0.5);
        --jp-91: rgba(50, 103, 188, 0.5);
        --jp-92: rgba(216, 112, 168, 0.5);
        --jp-93: rgba(191, 48, 134, 0.5);
        --jp-94: rgba(210, 128, 76, 0.5);
        --jp-95: rgba(183, 86, 3, 0.5);
        --jp-96: rgba(120, 62, 165, 0.5);
        --jp-97: rgba(100, 15, 165, 0.5);
        --jp-98: rgba(86, 167, 165, 0.5);
        --jp-99: rgba(16, 168, 165, 0.5);
        --jp-100: rgba(108, 171, 111, 0.5);
        --jp-101: rgba(76, 175, 80, 0.5);
        --jp-102: rgba(126, 124, 124, 0.5);
        --jp-103: rgba(68, 68, 68, 0.5);
        --jp-104: rgba(85, 151, 249, 0.5);
        --jp-105: rgba(2, 102, 251, 0.5);
        --jp-106: rgba(181, 90, 251, 0.5);
        --jp-107: rgba(144, 4, 251, 0.5);
        --jp-108: rgba(91, 253, 250, 0.5);
        --jp-109: rgba(3, 249, 244, 0.5);
        --jp-110: rgba(61, 114, 34, 0.5);
        --jp-111: rgba(40, 116, 1, 0.5);
        --jp-112: rgba(110, 84, 84, 0.5);
        --jp-113: rgba(48, 36, 36, 0.5);
    }

    /* Zero-specificity fallback background for any `.*_status_*` class built by
       JobStatusCssClass.Build with no dedicated colour rule below yet — e.g. real
       JobBookingStatus values "Cancelled"/"Pending"/"Stolen" have no rule for any CarSource here.
       Needed by the Messaging Inbox (Components/Pages/Messaging/MessagingInbox.razor.css):
       `.inbox-item` there sets no background of its own and unconditionally forces white text
       (--text-on-accent), so a row whose status combo matches nothing here would otherwise render
       with no background at all — white text on the ambient white surface, i.e. blank/invisible.
       `:where()` keeps this at zero specificity so every real `.*_status_*` rule below (normal
       specificity) still overrides it — same pattern as `.content-area`'s own zero-specificity
       fallback on the Jobs/Basic Jobs dashboards
       (docs/ragen-bug-fix-job-event-colors-showing-black-by-default-only), reusing that same
       fix's fallback token (--jp-9, a dark gray that stays legible under white text). BR-3: never
       blank, never an error (docs/message-inbox-redesign). `.inbox-item` only exists on
       MessagingInbox.razor's rows, so this selector never matches — and can't conflict with —
       JobsPage/BasicJobsPage's own `.content-area` cards. */
    :where(.inbox-item) {
        background: var(--jp-9);
    }

    /* Base Booked Car Status */
    .Outside_status_Booked {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-10), var(--jp-11), var(--jp-12), var(--jp-13));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Outside_status_Booked::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }

        /* Hover Effect for Booked Status */
        .Outside_status_Booked:hover {
            background: linear-gradient(145deg, var(--jp-14), var(--jp-15), var(--jp-16), var(--jp-17)) !important;
        }

            .Outside_status_Booked:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }

        /* Striped Effect for Both Classes */
        .Outside_status_Booked.Fix-and-Sell-purchase-type {
            background: repeating-linear-gradient(45deg, /* Diagonal direction */
            var(--jp-90), /* Semi-transparent lighter blue stripe */
            var(--jp-90) 10px, /* Stripe ends after 10px */
            var(--jp-91) 10px, /* Semi-transparent booked color */
            var(--jp-91) 20px), /* Stripe ends after 20px */
            linear-gradient(145deg, var(--jp-10), var(--jp-11), var(--jp-12)); /* Gradient base */
            border: 4px solid var(--jp-18); /* Keep the green border */
            border-radius: 20px;
            position: relative;
            z-index: 9;
            transition: background 0.3s ease, border-color 0.3s ease;
            background-blend-mode: overlay; /* Blends the gradient and stripes */
        }

            /* Hover Effect for Striped Combination */
            .Outside_status_Booked.Fix-and-Sell-purchase-type:hover {
                background: linear-gradient(145deg, var(--jp-14), var(--jp-15), var(--jp-16)) !important; /* Gradient hover */
                border-color: var(--jp-19) !important; /* Change border color to magenta on hover */
                background-blend-mode: overlay;
            }






    /* Base Prepaperwork and Paperwork Mailed Status */
    .Outside_status_Prepaperwork-Mailed, .Outside_status_Paperwork-Mailed {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-20), var(--jp-21), var(--jp-22));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Outside_status_Prepaperwork-Mailed::before, .Outside_status_Paperwork-Mailed::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }

        /* Hover Effect for Prepaperwork and Paperwork Mailed */
        .Outside_status_Prepaperwork-Mailed:hover, .Outside_status_Paperwork-Mailed:hover {
            background: linear-gradient(145deg, var(--jp-23), var(--jp-24), var(--jp-25)) !important; /* Lighter gradient on hover */
        }

            .Outside_status_Prepaperwork-Mailed:hover::before, .Outside_status_Paperwork-Mailed:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }

        /* Striped Effect for Fix-and-Sell Prepaperwork and Paperwork Mailed */
        .Outside_status_Prepaperwork-Mailed.Fix-and-Sell-purchase-type, .Outside_status_Paperwork-Mailed.Fix-and-Sell-purchase-type {
            background: repeating-linear-gradient(45deg, /* Diagonal direction */
            var(--jp-92), /* Semi-transparent lighter magenta stripe */
            var(--jp-92) 10px, /* Stripe ends after 10px */
            var(--jp-93) 10px, /* Semi-transparent magenta */
            var(--jp-93) 20px), /* Stripe ends after 20px */
            linear-gradient(145deg, var(--jp-20), var(--jp-21), var(--jp-22)); /* Gradient base */
            border: 4px solid var(--jp-18); /* Green border for consistency */
            border-radius: 20px;
            position: relative;
            z-index: 9;
            transition: background 0.3s ease, border-color 0.3s ease;
            background-blend-mode: overlay; /* Blends the gradient and stripes */
        }

            /* Hover Effect for Striped Prepaperwork and Paperwork Mailed */
            .Outside_status_Prepaperwork-Mailed.Fix-and-Sell-purchase-type:hover, .Outside_status_Paperwork-Mailed.Fix-and-Sell-purchase-type:hover {
                background: linear-gradient(145deg, var(--jp-23), var(--jp-24), var(--jp-25)) !important; /* Gradient hover */
                border-color: var(--jp-19) !important; /* Change border color to magenta on hover */
                background-blend-mode: overlay;
            }

    /* Base Prepaperwork and Paperwork Done Status */
    .Outside_status_Prepaperwork-Done, .Outside_status_Paperwork-Done {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-26), var(--jp-27), var(--jp-28));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Outside_status_Prepaperwork-Done::before, .Outside_status_Paperwork-Done::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }

        /* Hover Effect for Prepaperwork and Paperwork Done */
        .Outside_status_Prepaperwork-Done:hover, .Outside_status_Paperwork-Done:hover {
            background: linear-gradient(145deg, var(--jp-29), var(--jp-30), var(--jp-31)) !important; /* Lighter gradient on hover */
        }

            .Outside_status_Prepaperwork-Done:hover::before, .Outside_status_Paperwork-Done:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }

        /* Striped Effect for Fix-and-Sell Prepaperwork and Paperwork Done */
        .Outside_status_Prepaperwork-Done.Fix-and-Sell-purchase-type, .Outside_status_Paperwork-Done.Fix-and-Sell-purchase-type {
            background: repeating-linear-gradient(45deg, /* Diagonal direction */
            var(--jp-94), /* Semi-transparent lighter orange stripe */
            var(--jp-94) 10px, /* Stripe ends after 10px */
            var(--jp-95) 10px, /* Semi-transparent base orange stripe */
            var(--jp-95) 20px), /* Stripe ends after 20px */
            linear-gradient(145deg, var(--jp-26), var(--jp-27), var(--jp-28)); /* Gradient base */
            border: 4px solid var(--jp-18); /* Green border for consistency */
            border-radius: 20px;
            position: relative;
            z-index: 9;
            transition: background 0.3s ease, border-color 0.3s ease;
            background-blend-mode: overlay; /* Blends the gradient and stripes */
        }

            /* Hover Effect for Striped Prepaperwork and Paperwork Done */
            .Outside_status_Prepaperwork-Done.Fix-and-Sell-purchase-type:hover, .Outside_status_Paperwork-Done.Fix-and-Sell-purchase-type:hover {
                background: linear-gradient(145deg, var(--jp-29), var(--jp-30), var(--jp-31)) !important; /* Gradient hover */
                border-color: var(--jp-19) !important; /* Change border color to magenta on hover */
                background-blend-mode: overlay;
            }








    /* Base Prepaperwork and Paperwork Done Status */
    .Outside_status_Prepaperwork-Done---Paid {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-26), var(--jp-27), var(--jp-28));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Outside_status_Prepaperwork-Done---Paid::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }

        /* Hover Effect for Prepaperwork and Paperwork Done */
        .Outside_status_Prepaperwork-Done---Paid:hover {
            background: linear-gradient(145deg, var(--jp-29), var(--jp-30), var(--jp-31)) !important; /* Lighter gradient on hover */
        }

            .Outside_status_Prepaperwork-Done---Paid:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }

        /* Striped Effect for Fix-and-Sell Prepaperwork and Paperwork Done */
        .Outside_status_Prepaperwork-Done---Paid.Fix-and-Sell-purchase-type {
            background: repeating-linear-gradient(45deg, /* Diagonal direction */
            var(--jp-94), /* Semi-transparent lighter orange stripe */
            var(--jp-94) 10px, /* Stripe ends after 10px */
            var(--jp-95) 10px, /* Semi-transparent base orange stripe */
            var(--jp-95) 20px), /* Stripe ends after 20px */
            linear-gradient(145deg, var(--jp-26), var(--jp-27), var(--jp-28)); /* Gradient base */
            border: 4px solid var(--jp-18); /* Green border for consistency */
            border-radius: 20px;
            position: relative;
            z-index: 9;
            transition: background 0.3s ease, border-color 0.3s ease;
            background-blend-mode: overlay; /* Blends the gradient and stripes */
        }

            /* Hover Effect for Striped Prepaperwork and Paperwork Done */
            .Outside_status_Prepaperwork-Done---Paid.Fix-and-Sell-purchase-type:hover {
                background: linear-gradient(145deg, var(--jp-29), var(--jp-30), var(--jp-31)) !important; /* Gradient hover */
                border-color: var(--jp-19) !important; /* Change border color to magenta on hover */
                background-blend-mode: overlay;
            }


    /* Base Driver Messaged Status */
    .Outside_status_DriverMessaged {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-32), var(--jp-33), var(--jp-34));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Outside_status_DriverMessaged::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }

        /* Hover Effect for Driver Messaged Status */
        .Outside_status_DriverMessaged:hover {
            background: linear-gradient(145deg, var(--jp-33), var(--jp-34), var(--jp-35)) !important; /* Lighter gradient on hover */
        }

            .Outside_status_DriverMessaged:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }

        /* Striped Effect for Fix-and-Sell Driver Messaged */
        .Outside_status_DriverMessaged.Fix-and-Sell-purchase-type {
            background: repeating-linear-gradient(45deg, /* Diagonal direction */
            var(--jp-96), /* Semi-transparent lighter purple stripe */
            var(--jp-96) 10px, /* Stripe ends after 10px */
            var(--jp-97) 10px, /* Semi-transparent base purple stripe */
            var(--jp-97) 20px), /* Stripe ends after 20px */
            linear-gradient(145deg, var(--jp-32), var(--jp-33), var(--jp-34)); /* Gradient base */
            border: 4px solid var(--jp-18); /* Green border for consistency */
            border-radius: 20px;
            position: relative;
            z-index: 9;
            transition: background 0.3s ease, border-color 0.3s ease;
            background-blend-mode: overlay; /* Blends the gradient and stripes */
        }

            /* Hover Effect for Striped Driver Messaged */
            .Outside_status_DriverMessaged.Fix-and-Sell-purchase-type:hover {
                background: linear-gradient(145deg, var(--jp-33), var(--jp-34), var(--jp-35)) !important; /* Gradient hover */
                border-color: var(--jp-19) !important; /* Change border color to magenta on hover */
                background-blend-mode: overlay;
            }




    /* Base Enrouted Status */
    .Outside_status_Enrouted {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-36), var(--jp-37), var(--jp-38));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Outside_status_Enrouted::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }

        /* Hover Effect for Enrouted Status */
        .Outside_status_Enrouted:hover {
            background: linear-gradient(145deg, var(--jp-37), var(--jp-38), var(--jp-39)) !important; /* Lighter gradient on hover */
        }

            .Outside_status_Enrouted:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }

        /* Striped Effect for Fix-and-Sell Enrouted */
        .Outside_status_Enrouted.Fix-and-Sell-purchase-type {
            background: repeating-linear-gradient(45deg, /* Diagonal direction */
            var(--jp-98), /* Semi-transparent lighter teal stripe */
            var(--jp-98) 10px, /* Stripe ends after 10px */
            var(--jp-99) 10px, /* Semi-transparent base teal stripe */
            var(--jp-99) 20px), /* Stripe ends after 20px */
            linear-gradient(145deg, var(--jp-36), var(--jp-37), var(--jp-38)); /* Gradient base */
            border: 4px solid var(--jp-18); /* Green border for consistency */
            border-radius: 20px;
            position: relative;
            z-index: 9;
            transition: background 0.3s ease, border-color 0.3s ease;
            background-blend-mode: overlay; /* Blends the gradient and stripes */
        }

            /* Hover Effect for Striped Enrouted */
            .Outside_status_Enrouted.Fix-and-Sell-purchase-type:hover {
                background: linear-gradient(145deg, var(--jp-37), var(--jp-38), var(--jp-39)) !important; /* Gradient hover */
                border-color: var(--jp-19) !important; /* Change border color to magenta on hover */
                background-blend-mode: overlay;
            }



    /* Base Collected Status */
    .Outside_status_Collected {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-3), var(--jp-40), var(--jp-41));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Outside_status_Collected::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }

        /* Hover Effect for Collected Status */
        .Outside_status_Collected:hover {
            background: linear-gradient(145deg, var(--jp-40), var(--jp-41), var(--jp-42)) !important; /* Lighter gradient on hover */
        }

            .Outside_status_Collected:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }

        /* Striped Effect for Fix-and-Sell Collected */
        .Outside_status_Collected.Fix-and-Sell-purchase-type {
            background: repeating-linear-gradient(45deg, /* Diagonal direction */
            var(--jp-100), /* Semi-transparent lighter green stripe */
            var(--jp-100) 10px, /* Stripe ends after 10px */
            var(--jp-101) 10px, /* Semi-transparent base green stripe */
            var(--jp-101) 20px), /* Stripe ends after 20px */
            linear-gradient(145deg, var(--jp-3), var(--jp-40), var(--jp-41)); /* Gradient base */
            border: 4px solid var(--jp-18); /* Neon green border for consistency */
            border-radius: 20px;
            position: relative;
            z-index: 9;
            transition: background 0.3s ease, border-color 0.3s ease;
            background-blend-mode: overlay; /* Blends the gradient and stripes */
        }

            /* Hover Effect for Striped Collected Status */
            .Outside_status_Collected.Fix-and-Sell-purchase-type:hover {
                background: linear-gradient(145deg, var(--jp-40), var(--jp-41), var(--jp-42)) !important; /* Gradient hover */
                border-color: var(--jp-19) !important; /* Change border color to magenta on hover */
                background-blend-mode: overlay;
            }




    /* Base Paid Status */
    .Outside_status_Paid {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-9), var(--jp-43), var(--jp-44));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Outside_status_Paid::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }


        /* Hover Effect for Paid Status */
        .Outside_status_Paid:hover {
            background: linear-gradient(145deg, var(--jp-43), var(--jp-44), var(--jp-45)) !important; /* Lighter gradient on hover */
        }

            .Outside_status_Paid:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }

        /* Striped Effect for Fix-and-Sell Paid */
        .Outside_status_Paid.Fix-and-Sell-purchase-type {
            background: repeating-linear-gradient(45deg, /* Diagonal direction */
            var(--jp-102), /* Semi-transparent lighter gray stripe */
            var(--jp-102) 10px, /* Stripe ends after 10px */
            var(--jp-103) 10px, /* Semi-transparent base gray stripe */
            var(--jp-103) 20px), /* Stripe ends after 20px */
            linear-gradient(145deg, var(--jp-9), var(--jp-43), var(--jp-44)); /* Gradient base */
            border: 4px solid var(--jp-18); /* Neon green border for consistency */
            border-radius: 20px;
            position: relative;
            z-index: 9;
            transition: background 0.3s ease, border-color 0.3s ease;
            background-blend-mode: overlay; /* Blends the gradient and stripes */
        }

            /* Hover Effect for Striped Paid Status */
            .Outside_status_Paid.Fix-and-Sell-purchase-type:hover {
                background: linear-gradient(145deg, var(--jp-43), var(--jp-44), var(--jp-45)) !important; /* Gradient hover */
                border-color: var(--jp-19) !important; /* Change border color to magenta on hover */
                background-blend-mode: overlay;
            }








    /* Base Paid Status */
    .Outside_status_Collected---Paid {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-9), var(--jp-43), var(--jp-44));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Outside_status_Collected---Paid::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }


        /* Hover Effect for Paid Status */
        .Outside_status_Collected---Paid:hover {
            background: linear-gradient(145deg, var(--jp-43), var(--jp-44), var(--jp-45)) !important; /* Lighter gradient on hover */
        }

            .Outside_status_Collected---Paid:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }

        /* Striped Effect for Fix-and-Sell Paid */
        .Outside_status_Collected---Paid.Fix-and-Sell-purchase-type {
            background: repeating-linear-gradient(45deg, /* Diagonal direction */
            var(--jp-102), /* Semi-transparent lighter gray stripe */
            var(--jp-102) 10px, /* Stripe ends after 10px */
            var(--jp-103) 10px, /* Semi-transparent base gray stripe */
            var(--jp-103) 20px), /* Stripe ends after 20px */
            linear-gradient(145deg, var(--jp-9), var(--jp-43), var(--jp-44)); /* Gradient base */
            border: 4px solid var(--jp-18); /* Neon green border for consistency */
            border-radius: 20px;
            position: relative;
            z-index: 9;
            transition: background 0.3s ease, border-color 0.3s ease;
            background-blend-mode: overlay; /* Blends the gradient and stripes */
        }

            /* Hover Effect for Striped Paid Status */
            .Outside_status_Collected---Paid.Fix-and-Sell-purchase-type:hover {
                background: linear-gradient(145deg, var(--jp-43), var(--jp-44), var(--jp-45)) !important; /* Gradient hover */
                border-color: var(--jp-19) !important; /* Change border color to magenta on hover */
                background-blend-mode: overlay;
            }











    /*Tow job Car Status*/
    /* Base Tow-Job Booked Status */
    .Tow-Job_status_Booked {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-46), var(--jp-47), var(--jp-48));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Tow-Job_status_Booked::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }

        /* Hover Effect for Tow-Job Booked Status */
        .Tow-Job_status_Booked:hover {
            background: linear-gradient(145deg, var(--jp-15), var(--jp-49), var(--jp-17)) !important; /* Lighter gradient on hover */
        }

            .Tow-Job_status_Booked:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }



    /* Base Tow-Job Started Status */
    .Tow-Job_status_Started {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-36), var(--jp-37), var(--jp-38));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Tow-Job_status_Started::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }

        /* Hover Effect for Tow-Job Started Status */
        .Tow-Job_status_Started:hover {
            background: linear-gradient(145deg, var(--jp-37), var(--jp-38), var(--jp-39)) !important; /* Lighter gradient on hover */
        }

            .Tow-Job_status_Started:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }


    /* Base Tow-Job Completed Status */
    .Tow-Job_status_Completed {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-3), var(--jp-40), var(--jp-41));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Tow-Job_status_Completed::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }

        /* Hover Effect for Tow-Job Completed Status */
        .Tow-Job_status_Completed:hover {
            background: linear-gradient(145deg, var(--jp-40), var(--jp-41), var(--jp-42)) !important; /* Lighter gradient on hover */
        }

            .Tow-Job_status_Completed:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }



    /*Tow Service Car Status*/
    .Tow-Service_status_Booked, .Tow-Service_status_Authorization-Sent, .Tow-Service_status_Authorization-Signed {
        background: linear-gradient(145deg, var(--jp-46), var(--jp-47), var(--jp-48));
        border-radius: 20px;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
        transition: background 0.3s ease, filter 0.3s ease;
    }

    .Tow-Service_status_Dispatched, .Tow-Service_status_En-Route, .Tow-Service_status_Picked-Up {
        background: linear-gradient(145deg, var(--jp-36), var(--jp-37), var(--jp-38));
        border-radius: 20px;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
        transition: background 0.3s ease, filter 0.3s ease;
    }

    .Tow-Service_status_Delivered, .Tow-Service_status_Invoiced {
        background: linear-gradient(145deg, var(--jp-50), var(--jp-51), var(--jp-52));
        border-radius: 20px;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
        transition: background 0.3s ease, filter 0.3s ease;
    }

    .Tow-Service_status_Paid {
        background: linear-gradient(145deg, var(--jp-3), var(--jp-40), var(--jp-41));
        border-radius: 20px;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
        transition: background 0.3s ease, filter 0.3s ease;
    }

    .Tow-Service_status_Cancelled {
        background: linear-gradient(145deg, var(--jp-53), var(--jp-54), var(--jp-55));
        border-radius: 20px;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
        transition: background 0.3s ease, filter 0.3s ease;
    }

    .Tow-Service_status_Booked:hover, .Tow-Service_status_Authorization-Sent:hover, .Tow-Service_status_Authorization-Signed:hover,
    .Tow-Service_status_Dispatched:hover, .Tow-Service_status_En-Route:hover, .Tow-Service_status_Picked-Up:hover,
    .Tow-Service_status_Delivered:hover, .Tow-Service_status_Invoiced:hover, .Tow-Service_status_Paid:hover, .Tow-Service_status_Cancelled:hover {
        filter: brightness(1.15);
    }



    /*Business Car Status*/
    /* Base Booked Business Status */
    .Business_status_Booked {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-56), var(--jp-57), var(--jp-58)) !important;
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Business_status_Booked::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }

        /* Hover Effect for Booked Business Status */
        .Business_status_Booked:hover {
            background: linear-gradient(145deg, var(--jp-57), var(--jp-58), var(--jp-59)) !important; /* Lighter gradient on hover */
        }

            .Business_status_Booked:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }

        /* Striped Effect for Fix-and-Sell Business Booked */
        .Business_status_Booked.Fix-and-Sell-purchase-type {
            background: repeating-linear-gradient(45deg, /* Diagonal direction */
            var(--jp-104), /* Semi-transparent lighter blue stripe */
            var(--jp-104) 10px, /* Stripe ends after 10px */
            var(--jp-105) 10px, /* Semi-transparent base blue stripe */
            var(--jp-105) 20px), /* Stripe ends after 20px */
            linear-gradient(145deg, var(--jp-56), var(--jp-57), var(--jp-58)) !important; /* Gradient base */
            border: 4px solid var(--jp-18); /* Neon green border for consistency */
            border-radius: 20px;
            position: relative;
            z-index: 9;
            transition: background 0.3s ease, border-color 0.3s ease;
            background-blend-mode: overlay; /* Blends the gradient and stripes */
        }

            /* Hover Effect for Striped Business Booked */
            .Business_status_Booked.Fix-and-Sell-purchase-type:hover {
                background: linear-gradient(145deg, var(--jp-57), var(--jp-58), var(--jp-59)) !important; /* Gradient hover */
                border-color: var(--jp-19) !important; /* Change border color to magenta on hover */
                background-blend-mode: overlay;
            }




    /* Base Driver Messaged Business Status */
    .Business_status_DriverMessaged {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-60), var(--jp-61), var(--jp-62));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Business_status_DriverMessaged::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }

        /* Hover Effect for Driver Messaged Business Status */
        .Business_status_DriverMessaged:hover {
            background: linear-gradient(145deg, var(--jp-61), var(--jp-62), var(--jp-63)) !important; /* Lighter gradient on hover */
        }

            .Business_status_DriverMessaged:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }

        /* Striped Effect for Fix-and-Sell Driver Messaged */
        .Business_status_DriverMessaged.Fix-and-Sell-purchase-type {
            background: repeating-linear-gradient(45deg, /* Diagonal direction */
            var(--jp-106), /* Semi-transparent lighter purple stripe */
            var(--jp-106) 10px, /* Stripe ends after 10px */
            var(--jp-107) 10px, /* Semi-transparent base purple stripe */
            var(--jp-107) 20px), /* Stripe ends after 20px */
            linear-gradient(145deg, var(--jp-60), var(--jp-61), var(--jp-62)) !important; /* Gradient base */
            border: 4px solid var(--jp-18); /* Neon green border for consistency */
            border-radius: 20px;
            position: relative;
            z-index: 9;
            transition: background 0.3s ease, border-color 0.3s ease;
            background-blend-mode: overlay; /* Blends the gradient and stripes */
        }

            /* Hover Effect for Striped Driver Messaged Business */
            .Business_status_DriverMessaged.Fix-and-Sell-purchase-type:hover {
                background: linear-gradient(145deg, var(--jp-61), var(--jp-62), var(--jp-63)) !important; /* Gradient hover */
                border-color: var(--jp-19) !important; /* Change border color to magenta on hover */
                background-blend-mode: overlay;
            }

    /* Base Enrouted Business Status */
    .Business_status_Enrouted {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-64), var(--jp-65), var(--jp-66));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Business_status_Enrouted::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }

        /* Hover Effect for Enrouted Business Status */
        .Business_status_Enrouted:hover {
            background: linear-gradient(145deg, var(--jp-65), var(--jp-66), var(--jp-67)) !important; /* Lighter gradient on hover */
        }

            .Business_status_Enrouted:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }

        /* Striped Effect for Fix-and-Sell Enrouted */
        .Business_status_Enrouted.Fix-and-Sell-purchase-type {
            background: repeating-linear-gradient(45deg, /* Diagonal direction */
            var(--jp-108), /* Semi-transparent lighter teal stripe */
            var(--jp-108) 10px, /* Stripe ends after 10px */
            var(--jp-109) 10px, /* Semi-transparent base teal stripe */
            var(--jp-109) 20px), /* Stripe ends after 20px */
            linear-gradient(145deg, var(--jp-64), var(--jp-65), var(--jp-66)) !important; /* Gradient base */
            border: 4px solid var(--jp-18); /* Neon green border for consistency */
            border-radius: 20px;
            position: relative;
            z-index: 9;
            transition: background 0.3s ease, border-color 0.3s ease;
            background-blend-mode: overlay; /* Blends the gradient and stripes */
        }

            /* Hover Effect for Striped Enrouted Business */
            .Business_status_Enrouted.Fix-and-Sell-purchase-type:hover {
                background: linear-gradient(145deg, var(--jp-65), var(--jp-66), var(--jp-67)) !important; /* Gradient hover */
                border-color: var(--jp-19) !important; /* Change border color to magenta on hover */
                background-blend-mode: overlay;
            }








    /* Base Prepaperwork and Paperwork Mailed Status */
    .Business_status_Prepaperwork-Mailed, .Business_status_Paperwork-Mailed {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-20), var(--jp-21), var(--jp-22));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Business_status_Prepaperwork-Mailed::before, .Business_status_Paperwork-Mailed::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }

        /* Hover Effect for Prepaperwork and Paperwork Mailed */
        .Business_status_Prepaperwork-Mailed:hover, .Business_status_Paperwork-Mailed:hover {
            background: linear-gradient(145deg, var(--jp-23), var(--jp-24), var(--jp-25)) !important; /* Lighter gradient on hover */
        }

            .Business_status_Prepaperwork-Mailed:hover::before, .Business_status_Paperwork-Mailed:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }

        /* Striped Effect for Fix-and-Sell Prepaperwork and Paperwork Mailed */
        .Business_status_Prepaperwork-Mailed.Fix-and-Sell-purchase-type, .Business_status_Paperwork-Mailed.Fix-and-Sell-purchase-type {
            background: repeating-linear-gradient(45deg, /* Diagonal direction */
            var(--jp-92), /* Semi-transparent lighter magenta stripe */
            var(--jp-92) 10px, /* Stripe ends after 10px */
            var(--jp-93) 10px, /* Semi-transparent magenta */
            var(--jp-93) 20px), /* Stripe ends after 20px */
            linear-gradient(145deg, var(--jp-20), var(--jp-21), var(--jp-22)); /* Gradient base */
            border: 4px solid var(--jp-18); /* Green border for consistency */
            border-radius: 20px;
            position: relative;
            z-index: 9;
            transition: background 0.3s ease, border-color 0.3s ease;
            background-blend-mode: overlay; /* Blends the gradient and stripes */
        }

            /* Hover Effect for Striped Prepaperwork and Paperwork Mailed */
            .Business_status_Prepaperwork-Mailed.Fix-and-Sell-purchase-type:hover, .Business_status_Paperwork-Mailed.Fix-and-Sell-purchase-type:hover {
                background: linear-gradient(145deg, var(--jp-23), var(--jp-24), var(--jp-25)) !important; /* Gradient hover */
                border-color: var(--jp-19) !important; /* Change border color to magenta on hover */
                background-blend-mode: overlay;
            }

    /* Base Prepaperwork and Paperwork Done Status */
    .Business_status_Prepaperwork-Done, .Business_status_Paperwork-Done {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-26), var(--jp-27), var(--jp-28));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Business_status_Prepaperwork-Done::before, .Business_status_Paperwork-Done::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }

        /* Hover Effect for Prepaperwork and Paperwork Done */
        .Business_status_Prepaperwork-Done:hover, .Business_status_Paperwork-Done:hover {
            background: linear-gradient(145deg, var(--jp-29), var(--jp-30), var(--jp-31)) !important; /* Lighter gradient on hover */
        }

            .Business_status_Prepaperwork-Done:hover::before, .Business_status_Paperwork-Done:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }

        /* Striped Effect for Fix-and-Sell Prepaperwork and Paperwork Done */
        .Business_status_Prepaperwork-Done.Fix-and-Sell-purchase-type, .Business_status_Paperwork-Done.Fix-and-Sell-purchase-type {
            background: repeating-linear-gradient(45deg, /* Diagonal direction */
            var(--jp-94), /* Semi-transparent lighter orange stripe */
            var(--jp-94) 10px, /* Stripe ends after 10px */
            var(--jp-95) 10px, /* Semi-transparent base orange stripe */
            var(--jp-95) 20px), /* Stripe ends after 20px */
            linear-gradient(145deg, var(--jp-26), var(--jp-27), var(--jp-28)); /* Gradient base */
            border: 4px solid var(--jp-18); /* Green border for consistency */
            border-radius: 20px;
            position: relative;
            z-index: 9;
            transition: background 0.3s ease, border-color 0.3s ease;
            background-blend-mode: overlay; /* Blends the gradient and stripes */
        }

            /* Hover Effect for Striped Prepaperwork and Paperwork Done */
            .Business_status_Prepaperwork-Done.Fix-and-Sell-purchase-type:hover, .Business_status_Paperwork-Done.Fix-and-Sell-purchase-type:hover {
                background: linear-gradient(145deg, var(--jp-29), var(--jp-30), var(--jp-31)) !important; /* Gradient hover */
                border-color: var(--jp-19) !important; /* Change border color to magenta on hover */
                background-blend-mode: overlay;
            }








    /* Base Prepaperwork and Paperwork Done Status */
    .Business_status_Prepaperwork-Done---Paid {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-26), var(--jp-27), var(--jp-28));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Business_status_Prepaperwork-Done---Paid::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }

        /* Hover Effect for Prepaperwork and Paperwork Done */
        .Business_status_Prepaperwork-Done---Paid:hover {
            background: linear-gradient(145deg, var(--jp-29), var(--jp-30), var(--jp-31)) !important; /* Lighter gradient on hover */
        }

            .Business_status_Prepaperwork-Done---Paid:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }

        /* Striped Effect for Fix-and-Sell Prepaperwork and Paperwork Done */
        .Business_status_Prepaperwork-Done---Paid.Fix-and-Sell-purchase-type {
            background: repeating-linear-gradient(45deg, /* Diagonal direction */
            var(--jp-94), /* Semi-transparent lighter orange stripe */
            var(--jp-94) 10px, /* Stripe ends after 10px */
            var(--jp-95) 10px, /* Semi-transparent base orange stripe */
            var(--jp-95) 20px), /* Stripe ends after 20px */
            linear-gradient(145deg, var(--jp-26), var(--jp-27), var(--jp-28)); /* Gradient base */
            border: 4px solid var(--jp-18); /* Green border for consistency */
            border-radius: 20px;
            position: relative;
            z-index: 9;
            transition: background 0.3s ease, border-color 0.3s ease;
            background-blend-mode: overlay; /* Blends the gradient and stripes */
        }

            /* Hover Effect for Striped Prepaperwork and Paperwork Done */
            .Business_status_Prepaperwork-Done---Paid.Fix-and-Sell-purchase-type:hover {
                background: linear-gradient(145deg, var(--jp-29), var(--jp-30), var(--jp-31)) !important; /* Gradient hover */
                border-color: var(--jp-19) !important; /* Change border color to magenta on hover */
                background-blend-mode: overlay;
            }












    /* Base Collected Business Status */
    .Business_status_Collected {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-68), var(--jp-69), var(--jp-70));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Business_status_Collected::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }

        /* Hover Effect for Collected Business Status */
        .Business_status_Collected:hover {
            background: linear-gradient(145deg, var(--jp-69), var(--jp-70), var(--jp-71)) !important; /* Lighter gradient on hover */
        }

            .Business_status_Collected:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }

        /* Striped Effect for Fix-and-Sell Collected */
        .Business_status_Collected.Fix-and-Sell-purchase-type {
            background: repeating-linear-gradient(45deg, /* Diagonal direction */
            var(--jp-110), /* Semi-transparent lighter green stripe */
            var(--jp-110) 10px, /* Stripe ends after 10px */
            var(--jp-111) 10px, /* Semi-transparent base green stripe */
            var(--jp-111) 20px), /* Stripe ends after 20px */
            linear-gradient(145deg, var(--jp-68), var(--jp-69), var(--jp-70)) !important; /* Gradient base */
            border: 4px solid var(--jp-18); /* Neon green border */
            border-radius: 20px;
            position: relative;
            z-index: 9;
            transition: background 0.3s ease, border-color 0.3s ease;
            background-blend-mode: overlay; /* Blends the gradient and stripes */
        }

            /* Hover Effect for Striped Collected Business */
            .Business_status_Collected.Fix-and-Sell-purchase-type:hover {
                background: linear-gradient(145deg, var(--jp-69), var(--jp-70), var(--jp-71)) !important; /* Gradient hover */
                border-color: var(--jp-19) !important; /* Neon green border on hover */
                background-blend-mode: overlay;
            }


    /* Base Paid Business Status */
    .Business_status_Paid {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-72), var(--jp-73), var(--jp-74));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Business_status_Paid::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }

        /* Hover Effect for Paid Business Status */
        .Business_status_Paid:hover {
            background: linear-gradient(145deg, var(--jp-73), var(--jp-74), var(--jp-75)) !important; /* Lighter gradient on hover */
        }

            .Business_status_Paid:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }

        /* Striped Effect for Fix-and-Sell Paid */
        .Business_status_Paid.Fix-and-Sell-purchase-type {
            background: repeating-linear-gradient(45deg, /* Diagonal direction */
            var(--jp-112), /* Semi-transparent lighter brown/red stripe */
            var(--jp-112) 10px, /* Stripe ends after 10px */
            var(--jp-113) 10px, /* Semi-transparent base brown/red stripe */
            var(--jp-113) 20px), /* Stripe ends after 20px */
            linear-gradient(145deg, var(--jp-72), var(--jp-73), var(--jp-74)) !important; /* Gradient base */
            border: 4px solid var(--jp-18); /* Neon green border */
            border-radius: 20px;
            position: relative;
            z-index: 9;
            transition: background 0.3s ease, border-color 0.3s ease;
            background-blend-mode: overlay; /* Blends the gradient and stripes */
        }

            /* Hover Effect for Striped Paid Business */
            .Business_status_Paid.Fix-and-Sell-purchase-type:hover {
                background: linear-gradient(145deg, var(--jp-73), var(--jp-74), var(--jp-75)) !important; /* Gradient hover */
                border-color: var(--jp-19) !important; /* Neon green border on hover */
                background-blend-mode: overlay;
            }







    /* Base Paid Business Status */
    .Business_status_Collected---Paid {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-72), var(--jp-73), var(--jp-74));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Business_status_Collected---Paid::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }

        /* Hover Effect for Paid Business Status */
        .Business_status_Collected---Paid:hover {
            background: linear-gradient(145deg, var(--jp-73), var(--jp-74), var(--jp-75)) !important; /* Lighter gradient on hover */
        }

            .Business_status_Collected---Paid:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }

        /* Striped Effect for Fix-and-Sell Paid */
        .Business_status_Collected---Paid.Fix-and-Sell-purchase-type {
            background: repeating-linear-gradient(45deg, /* Diagonal direction */
            var(--jp-112), /* Semi-transparent lighter brown/red stripe */
            var(--jp-112) 10px, /* Stripe ends after 10px */
            var(--jp-113) 10px, /* Semi-transparent base brown/red stripe */
            var(--jp-113) 20px), /* Stripe ends after 20px */
            linear-gradient(145deg, var(--jp-72), var(--jp-73), var(--jp-74)) !important; /* Gradient base */
            border: 4px solid var(--jp-18); /* Neon green border */
            border-radius: 20px;
            position: relative;
            z-index: 9;
            transition: background 0.3s ease, border-color 0.3s ease;
            background-blend-mode: overlay; /* Blends the gradient and stripes */
        }

            /* Hover Effect for Striped Paid Business */
            .Business_status_Collected---Paid.Fix-and-Sell-purchase-type:hover {
                background: linear-gradient(145deg, var(--jp-73), var(--jp-74), var(--jp-75)) !important; /* Gradient hover */
                border-color: var(--jp-19) !important; /* Neon green border on hover */
                background-blend-mode: overlay;
            }

    /*Auction Car Status*/
    /* Base Auction Booked Status */
    .Auction_status_Booked {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-46), var(--jp-47), var(--jp-48));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Auction_status_Booked::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }

        /* Hover Effect for Auction Booked Status */
        .Auction_status_Booked:hover {
            background: linear-gradient(145deg, var(--jp-47), var(--jp-48), var(--jp-76)) !important; /* Lighter gradient on hover */
        }

            .Auction_status_Booked:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }



    /* Base Auction Driver Messaged Status */
    .Auction_status_DriverMessaged {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-77), var(--jp-78), var(--jp-79));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Auction_status_DriverMessaged::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }

        /* Hover Effect for Auction Driver Messaged Status */
        .Auction_status_DriverMessaged:hover {
            background: linear-gradient(145deg, var(--jp-78), var(--jp-79), var(--jp-80)) !important; /* Lighter gradient on hover */
        }

            .Auction_status_DriverMessaged:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }


    /* Base Auction Enrouted Status */
    .Auction_status_Enrouted {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-81), var(--jp-82), var(--jp-83));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Auction_status_Enrouted::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }

        /* Hover Effect for Auction Enrouted Status */
        .Auction_status_Enrouted:hover {
            background: linear-gradient(145deg, var(--jp-82), var(--jp-83), var(--jp-84)) !important; /* Lighter gradient on hover */
        }

            .Auction_status_Enrouted:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }



    /* Base Auction Collected Status */
    .Auction_status_Collected {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-85), var(--jp-86), var(--jp-87));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Auction_status_Collected::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }

        /* Hover Effect for Auction Collected Status */
        .Auction_status_Collected:hover {
            background: linear-gradient(145deg, var(--jp-86), var(--jp-87), var(--jp-88)) !important; /* Lighter gradient on hover */
        }

            .Auction_status_Collected:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }




    /* Base Paid Auction Status */
    .Auction_status_Paid {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-72), var(--jp-73), var(--jp-74));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Auction_status_Paid::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }

        /* Hover Effect for Paid Auction Status */
        .Auction_status_Paid:hover {
            background: linear-gradient(145deg, var(--jp-73), var(--jp-74), var(--jp-75)) !important; /* Lighter gradient on hover */
        }

            .Auction_status_Paid:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }






    /* Base Paid Auction Status */
    .Auction_status_Collected_Paid {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-72), var(--jp-73), var(--jp-74));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Auction_status_Collected_Paid::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }

        /* Hover Effect for Paid Auction Status */
        .Auction_status_Collected_Paid:hover {
            background: linear-gradient(145deg, var(--jp-73), var(--jp-74), var(--jp-75)) !important; /* Lighter gradient on hover */
        }

            .Auction_status_Collected_Paid:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }

    /* Base Paid Auction Status */
    .Auction_status_Collected---Paid {
        position: relative; /* To position the pseudo-element */
        background: linear-gradient(145deg, var(--jp-72), var(--jp-73), var(--jp-74));
        border-radius: 20px;
        overflow: hidden; /* Ensure everything stays within the rounded corners */
        z-index: 1; /* Ensure this is on top of the shadow */
        transition: background 0.3s ease;
    }

        /* Pseudo-element for shadow */
        .Auction_status_Collected---Paid::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px; /* Match the border-radius */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
            z-index: -1; /* Keep the shadow behind the element */
            transition: box-shadow 0.3s ease;
        }

        /* Hover Effect for Paid Auction Status */
        .Auction_status_Collected---Paid:hover {
            background: linear-gradient(145deg, var(--jp-73), var(--jp-74), var(--jp-75)) !important; /* Lighter gradient on hover */
        }

            .Auction_status_Collected---Paid:hover::before {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
            }






    /*Processing Yard Transfer Status*/
    .Processing-Yard-Transfer_status_Ended {
        background: linear-gradient(145deg, var(--jp-3), var(--jp-40), var(--jp-41));
        border-radius: 20px;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
        opacity: 0.85;
        transition: background 0.3s ease, filter 0.3s ease;
    }

    .Processing-Yard-Transfer_status_Ended:hover {
        filter: brightness(1.1);
    }

    .status_Cancelled {
        background: var(--jp-5);
        border-radius: 20px;
    }

    .status_null {
        background: var(--jp-89);
        border-radius: 20px;
    }

    .status_NoDeal {
        background: var(--jp-9);
        border-radius: 20px;
    }

    .status_Enrouted {
        background: var(--jp-36);
        border-radius: 20px;
    }