@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --lv-text-primary: #374151;
    --lv-text-secondary: #6b7280;
    --lv-text-disabled: #9ca3af;
    --lv-text-inverted: #ffffff;
    --lv-background-primary: #ffffff;
    --lv-background-secondary: #f8fafc;
    --lv-background-accent: #000000;
    --lv-border-primary: #e5e7eb;
    --lv-border-secondary: #f3f4f6;
    --lv-hover-background: #f9fafb;
    --lv-hover-accent: #333333;
    --lv-font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    --lv-font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    --lv-font-size-base: 13px;
    --lv-font-size-small: 11.5px;
    --lv-font-size-large: 16px;
    --lv-line-height-base: 1.5;
    --lv-border-radius: 10px;
    --lv-border-radius-small: 6px;
    --lv-spacing-unit: 8px;
}

html, body {
    font-family: 'Poppins', Arial, sans-serif;
    margin: 0;
    height: 100%;
    width: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    background-color: #f8f8f8;
}

@media (max-width: 640px) {
    html, body {
        overflow-y: auto !important;
        height: auto;
        background: white;
        background-color: rgb(248 248 248);
        color: black;
    }


    .brands-dropdown-menu {
        max-height: 400px;
        overflow-y: auto;
        position: absolute;
        z-index: 1000;
    }


    .no-scroll {
        overflow: auto !important;
    }
}

.navbar-toggler[b-wi7pymtpyd] {
    background-color: black;
}

h1:focus {
    outline: none;
}

/* Chrome, Edge (Chromium) – new internal selector */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    /* "paint over" the UA yellow/grey background: */
    box-shadow: 0 0 0px 1000px white inset !important;
    -webkit-text-fill-color: #000 !important;
}

/* Safari & older WebKit browsers */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    background-color: white !important;
    color: #000 !important;
    box-shadow: 0 0 0px 1000px white inset !important;
    -webkit-text-fill-color: #000 !important;
}

    input:-webkit-autofill:focus,
    input:-webkit-autofill:hover {
        box-shadow: 0 0 0px 1000px white inset !important;
        -webkit-text-fill-color: #000 !important;
    }

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 10px 2px rgba(255, 255, 255, 0.8), 0 0 20px 4px rgba(0, 0, 0, 0.6);
    border-color: #a1a1a140;
    color: black;
    outline: 0;
}


@media (max-width: 600px) {
    .form-control,
    input,
    textarea {
        font-size: 16px !important;
    }
}

.content {
    padding-top: 1.1rem;
}


.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

code {
    color: #c02d76;
}


/*HomePage CSS*/

.modal-overlay {
    display: none; /* Initially hidden */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Dark transparent overlay */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it's above other elements */
}

#tutorialModal .modal-content {
    background: white !important;
    padding: 20px !important;
    border-radius: 8px !important;
    width: 70% !important;
    max-width: 1200px !important;
    max-height: 90vh !important;
    z-index: 1001 !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}


/* Carousel */
.carousel-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-item {
    min-width: 100%;
    box-sizing: border-box;
    display: none;
    overflow-y: auto;
    max-height: 100%;
    padding-right: 10px;
}

    .carousel-item.active {
        display: block;
    }

    /* Custom scrollbar for carousel items */
    .carousel-item::-webkit-scrollbar {
        width: 8px;
    }

    .carousel-item::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .carousel-item::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 4px;
    }

        .carousel-item::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }

/* Carousel Controls */
.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
}

.carousel-control-prev {
    left: 10px;
}

.carousel-control-next {
    right: 10px;
}

/* Button container */
.carousel-buttons {
    display: flex;
    justify-content: space-between; /* Align "Close Tutorial" left and buttons right */
    align-items: center;
    width: 100%;
}

/* Close Tutorial Link (Left Side) */
.close-tutorial {
    color: red;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.8rem;
    text-transform: uppercase;
}

/* Button container (Right Side) */
.button-group {
    display: flex;
    gap: 10px; /* Space between buttons */
}

/* Previous and Next Buttons */
.carousel-button {
    background: #f0f0f0;
    border: none;
    padding: 10px 20px;
    font-size: 0.8rem;
    border-radius: 20px; /* Rounded edges */
    cursor: pointer;
    font-weight: bold;
    color: #555;
    transition: background 0.3s ease-in-out;
}

    .carousel-button:hover {
        background: #ddd;
    }

    /* Disabled Button Styling */
    .carousel-button:disabled {
        background: #e0e0e0;
        cursor: not-allowed;
        color: #999;
    }

.carousel-text {
    text-align: left;
}

    .carousel-text h4 {
        margin-top: 15px;
        font-size: 1.1rem;
    }

    .carousel-text ul {
        padding-left: 20px;
        list-style-type: disc;
    }

    .carousel-text li {
        margin-bottom: 5px;
        font-size: 0.85rem;
    }

.custom-tutorial-btn {
    color: #000000;
    position: absolute;
    padding: 10px 20px;
    font-size: 16px;
    top: 5.5rem;
    left: 340px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

    .custom-tutorial-btn:hover {
        text-decoration: underline;
    }

    .custom-tutorial-btn:active {
        text-decoration: underline;
    }

    .custom-tutorial-btn:focus {
        outline: none;
    }


@media (max-width: 640px) {
    .custom-tutorial-btn {
        display: none;
    }
}

/*Navbar Home*/


.text-red {
    color: red;
}

.text-green {
    color: green;
}

.navbar-home {
    position: fixed;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    height: 80px;
    width: 100%;
    margin: 0;
    padding: 0 20px;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.navbar-item {
    display: flex;
    align-items: center;
    padding: 0 10px;
    margin: 0;
    box-sizing: border-box;
}

.navbar-logo {
    height: 60%;
    max-height: 48px;
    margin-right: 20px;
}

.navbar-links {
    display: flex;
    gap: 15px;
}

    .navbar-links a {
        text-decoration: none;
        font-size: 16px;
        color: #333;
        padding: 5px 10px;
        border-radius: 4px;
        transition: background-color 0.3s ease;
    }

        .navbar-links a:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }

.navbar-actions {
    display: flex;
    gap: 15px;
}

    .navbar-actions button {
        padding: 8px 12px;
        font-size: 14px;
        border: none;
        border-radius: 4px;
        background-color: #007BFF;
        color: white;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

        .navbar-actions button:hover {
            background-color: #0056b3;
        }



/* Only affect the currency nav item */
.currency-nav-item {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Remove any extra margin that might push it down */
    margin-top: 0 !important;
    background-color: transparent;
    /* (Optional) If you want any additional padding */
    padding: 0.5rem 1rem;
}

/* For mobile view only: target the currency nav item with increased specificity */
@media (max-width: 767px) {
    .currency-nav-item {
        position: absolute; /* Remove absolute positioning */
        margin-top: auto; /* Push it to the bottom of the flex container */
        width: auto; /* Let it size naturally */
        padding: 0.5rem; /* Adjust as desired */
        margin-top: 0 !important;
        bottom: 5rem;
        left: 0.7rem;
        background-color: transparent;
    }

    .custom-dropdown-selected {
        background-color: #333;
        color: #fff;
        border: 1px solid #555;
        padding: 0.3rem 0.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

/* Existing custom dropdown styling remains the same */
.custom-dropdown-selected {
    background-color: #333;
    color: #fff;
    border: 1px solid #555;
    padding: 0.3rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .custom-dropdown-selected:hover {
        background-color: #444;
    }

.custom-dropdown-arrow {
    margin-left: 0.5rem;
    display: flex;
    align-items: center;
}

.custom-dropdown-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 100%; /* Display above the selected element */
    left: 0;
    width: 100%;
    background-color: #333;
    border: 1px solid #555;
    z-index: 999;
    margin-bottom: 0.2rem;
}

    .custom-dropdown-menu li {
        padding: 0.3rem 0.5rem;
        color: #fff;
        cursor: pointer;
    }

        .custom-dropdown-menu li:hover {
            background-color: #444;
        }




.navbar-home-logo {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar-home-logo-img {
    height: 100%;
    max-height: 68px;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0;
    padding: 0;
}



.navbar-home-logo-main {
    text-decoration: none;
    color: #f7635d;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

    .navbar-home-logo-main:hover,
    .navbar-home-logo-main:focus,
    .navbar-home-logo-main:visited,
    .navbar-home-logo-main:active {
        text-decoration: none;
        color: #f7635d;
        transform: scale(1.1);
    }

.navbar-home-logo-sub {
    font-size: 1rem;
    font-weight: 500;
    color: #f7635d;
    margin-left: 5px;
}


.navbar-home-user-icon {
    padding-right: 250px;
    background-color: white;
}

.navbar-home-user-dropdown {
    position: absolute;
    top: 100%;
    right: 15rem;
    background: linear-gradient(135deg, #f8f9fa, #e6e6e6);
    border: 1px solid rgba(200, 200, 200, 0.8);
    border-radius: 12px;
    box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    padding: 20px;
    min-width: 220px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
    transform: translateY(-10px);
}

    .navbar-home-user-dropdown.show {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

.btn-signout {
    width: 50%;
    background: linear-gradient(135deg, #333, #555);
    color: #fff;
    border: none;
    padding: 0.35rem;
    text-align: center;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, transform 0.2s ease;
}

    .btn-signout:hover {
        background: linear-gradient(135deg, #111, #333);
        transform: translateY(-3px);
    }

.user-email {
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    padding: 1rem;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 1rem;
    background: rgba(240, 240, 240, 0.8);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, background 0.4s ease;
}

    .user-email:hover {
        transform: scale(1.05);
        background: rgba(250, 250, 250, 0.95);
    }


.user-menu {
    position: relative;
    display: inline-block;
}
/* Dropdown menu default state: Hidden */
/* Dropdown menu default state: Hidden */
.user-dropdown-menu {
    position: absolute;
    top: 100%;
    margin-top: 1.3rem;
    right: -1.5rem;
    background: linear-gradient(135deg, #f8f9fa, #e6e6e6);
    border: 1px solid rgba(200, 200, 200, 0.8);
    border-radius: 12px;
    box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    padding: 20px;
    min-width: 220px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
    transform: translateY(-10px);
}

    .user-dropdown-menu.show {
        /* The final, visible state */
        opacity: 1;
        min-width: 200px;
        visibility: visible;
        transform: translateY(0);
    }


/* Ensure the SVG icon remains in place */
.navbar-home-user-icon svg {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.navbar-home-user-icon img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #444;
    cursor: pointer;
}

    .navbar-home-user-icon img:hover {
        opacity: 0.8;
    }

@media (max-width: 768px) {
    .navbar-home {
        display: none;
        padding: 5px 10px;
    }

    .navbar-home-logo-main {
        font-size: 1.2rem;
    }

    .navbar-home-logo-sub {
        font-size: 0.9rem;
    }

    .CustomerDropdown .customer-dropdown-menu {
        position: relative !important;
        overflow: visible;
    }
}
/* Chart Section */
.chart-section {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 500px; /* Increased height */
}

    .chart-section h3 {
        font-size: 1.2rem;
        margin-bottom: 15px;
        text-align: center;
        color: #333;
    }

#salesBarChart {
    width: 100%;
    height: 400px; /* Increased height */
    max-height: 450px; /* Adjusted maximum height */
    overflow: hidden;
}

/* Mobile and Tablet View */
@media (max-width: 768px) {
    .chart-section {
        max-width: 100%;
        margin: 0 auto;
        height: 450px; /* Increased height for smaller screens */
    }

    h3 {
        font-size: 1rem;
    }
}

.dashboard-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.dashboard {
    padding: 20px;
    font-family: Arial, sans-serif;
    position: absolute;
    top: 7rem;
    border-radius: 10px;
    z-index: 10;
    width: 80%;
    padding-left: 30px;
}


.stats-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    margin-top: 10px;
    margin-bottom: 20px;
}

/* Flip Card Base Structure */
.flip-card {
    flex: 1 1 calc(25% - 15px);
    background-color: transparent;
    width: 100%;
    height: 250px;
    perspective: 1000px;
    min-width: 200px;
    font-family: sans-serif;
}

/* Flip Card Inner */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
}

/* Front and Back Faces */
.flip-card-front,
.flip-card-back {
    box-shadow: 15px 15px 30px #bebebe30, -2px -10px 30px #ffffff;
    position: absolute;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    text-align: center;
    text-rendering: optimizeLegibility;
}

/* Front Face Styling */
.flip-card-front {
    background: linear-gradient(120deg, #ffffff 60%, rgb(123 123 123 / 0%) 88%, rgb(6 6 6 / 92%) 40%, rgb(0 0 0 / 84%) 48%);
    color: #212121;
    border-radius: 20px;
    padding: 10px;
}

    /* Title Styling */
    .flip-card-front .title,
    .flip-card-back .title {
        font-size: 1.2em;
        font-weight: 500;
        margin-bottom: 10px;
    }

    /* Amount Styling */
    .flip-card-front .amount,
    .flip-card-back .amount {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 10px;
    }

    /* Comparison Styling */
    .flip-card-front .comparison,
    .flip-card-back .comparison {
        font-size: 0.9rem;
        margin-top: 10px;
    }

        /* Hover Text Colors */
        .flip-card-front .comparison span,
        .flip-card-back .comparison span {
            font-weight: bold;
        }

/* Responsive Adjustments */
@media (max-width: 768px) {
    .stats-cards {
        justify-content: center;
    }

    .flip-card {
        flex: 1 1 100%;
        max-width: 90%;
    }
}

.text-danger {
    color: #dc3545;
}

.text-success {
    color: #28a745;
}

/* Container for the tooltip */
.tooltip-container {
    position: absolute;
    cursor: pointer;
    /* left: 30%; */
    right: 10%;
    width: 30px;
    bottom: 30%;
}

/* Tooltip text (hidden by default) */
.tooltip-text {
    visibility: hidden;
    background-color: #333;
    color: #fff;
    padding: 8px;
    border-radius: 4px;
    position: absolute;
    z-index: 1000;
    bottom: -150%;
    transform: translateX(-90%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;
    white-space: nowrap;
}

/* Show tooltip on hover */
.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}



@media (max-width: 768px) {


    .dashboard {
        padding: 20px;
        font-family: Arial, sans-serif;
        position: relative;
        top: -2rem;
        z-index: 100;
        overflow: hidden;
        left: 0;
        transform: none;
        width: auto;
    }
}

@media (max-width: 480px) {
    .extra-card {
        flex: 1 1 100%;
    }
}

.x-axis {
    display: flex;
    align-items: flex-end;
    gap: 15px;
}

.bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bar {
    width: 20px;
    margin: 0 5px;
    border-radius: 4px 4px 0 0;
    position: relative;
}

    .bar.sales {
        background-color: #98D8B6;
    }

    .bar.previous-year {
        background-color: #FBCDC0;
    }

.bar-group span {
    margin-top: 10px;
    font-size: 0.8rem;
    color: #333;
}

.legend {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 15px;
}

.legend-color {
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-right: 5px;
    border-radius: 3px;
}

    .legend-color.sales {
        background-color: #98D8B6;
    }

    .legend-color.previous-year {
        background-color: lightskyblue;
    }




/*Sales CSS*/

.sales-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 20px;
}

.sales-search-container {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.search-container {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 220px;
}

.sales-search-container input {
    width: 100%;
    padding: 8px 28px 8px 32px;
    border: 1px solid var(--lv-border-primary, #e5e7eb);
    border-radius: 6px;
    background: linear-gradient(145deg, #ffffff, #f9fafb);
    font-size: 12px;
    color: var(--lv-text-primary, #374151);
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
}

    .sales-search-container input:focus {
        outline: none;
        border-color: var(--lv-background-accent, #000000);
        box-shadow: 0 0 0 3px rgba(59,130,246,0.1), 0 2px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.9);
    }

.search-icon {
    position: absolute;
    left: 8px;
    width: 16px;
    height: 16px;
    color: #6b7280;
    pointer-events: none;
    z-index: 1;
}



.sales-navbar {
    position: sticky;
    top: 0;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa;
    padding: 10px 20px;
    z-index: 10;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
}

.sales-card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

@media (max-width: 768px) {
    .sales-card {
        width: 100%;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.sales-card h3 {
    font-size: 16px;
    color: #333333;
    margin-bottom: 10px;
}

.sales-card h1 {
    font-size: 2rem;
    font-weight: bold;
    margin: 10px 0;
    color: #000000;
}

.sales-card p {
    font-size: 14px;
    color: #666666;
    margin-bottom: 20px;
}

.sales-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .sales-list li {
        display: grid;
        grid-template-columns: 30px auto 60px 100px;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
        padding-top: 10px;
    }

.flag {
    font-size: 16px;
}

.country-name {
    font-weight: bold;
    text-align: left;
    font-size: 0.8rem;
}

.sales-value {
    display: inline-block; /* Prevents the element from breaking onto multiple lines */
    white-space: nowrap; /* Prevents line breaks inside the element */
    font-weight: bold;
    font-size: 0.85rem;
    color: #333;
    text-align: right;
}

.filter-navbar {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}

.filter-dropdown {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .filter-dropdown label {
        font-weight: bold;
        font-size: 0.9em;
        color: #333;
    }

    .filter-dropdown select,
    .filter-dropdown input[type="date"] {
        padding: 5px;
        border-radius: 4px;
        border: 1px solid #ccc;
        font-size: 0.9em;
    }

/* Sales Dashboard Content */
.sales-dashboard {
    width: 95%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    overflow-x: hidden;
}

#salesChart {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.sales-chart h3 {
    font-size: 1.2rem;
}

.dashboard-chart {
    background: white;
    padding: 20px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 3;
    background-color: white;
    width: 100%
}

.sales-chart-container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    display: flex;
    height: 400px;
    flex-direction: column;
    gap: 15px;
    flex: 3;
    background-color: white;
    width: 60%;
}


/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
    .sales-dashboard {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .sales-chart-container {
        height: 400px;
        min-height: 390px;
        width: 100%;
        margin: 0;
    }
}

.sales-summary {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sales-summary-card {
    background-color: #f4f4f4;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

    .sales-summary-card h2 {
        font-size: 1.2rem;
        margin: 0;
    }

    .sales-summary-card h3 {
        font-size: 1.5rem;
        margin: 5px 0;
    }

    .sales-summary-card p {
        font-size: 1rem;
        margin: 0;
    }


.best-selling-products h2 {
    font-size: 1.1rem;
    margin-bottom: 15px;
}

/* Table Styling */

.best-selling-products {
    width: 95.5%;
    margin: auto;
    background-color: #ffffff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.1);
    border-color: black;
}

/* Table Styles - Matching SalesAnalytics.razor */
.best-selling-products-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-family: var(--lv-font-main, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(99, 102, 241, 0.2);
    min-width: 1000px;
    table-layout: auto;
}

    .best-selling-products-table th, .best-selling-products-table td {
        padding: 10px 12px;
        border: none;
        font-size: 10px;
        border-bottom: 1px solid var(--lv-border-secondary, #f3f4f6);
        text-align: center;
        vertical-align: middle;
        color: var(--lv-text-primary, #374151);
        white-space: nowrap;
        line-height: 1.4;
        box-sizing: border-box;
        margin: 0;
    }

    .best-selling-products-table th {
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.4;
        padding: 10px 12px;
    }

    .best-selling-products-table td {
        line-height: 1.4;
        padding: 10px 12px;
    }

    .best-selling-products-table th {
        position: relative;
        background: linear-gradient(145deg, var(--lv-background-accent, #000000), var(--lv-hover-accent, #333333));
        color: var(--lv-text-inverted, #ffffff);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        position: sticky;
        top: 0;
        text-align: center;
        z-index: 10;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1);
        min-width: 80px;
        cursor: pointer;
        user-select: none;
        transition: background 0.15s ease;
        will-change: background;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.4;
        word-break: keep-all;
        hyphens: none;
        padding: 10px 10px;
        box-sizing: border-box;
    }

        .best-selling-products-table th:hover {
            background: linear-gradient(145deg, var(--lv-hover-accent, #333333), var(--lv-background-accent, #000000));
        }

        .best-selling-products-table th span {
            display: inline-block;
            margin-left: 0.25rem;
            vertical-align: middle;
            font-size: 0.75rem;
            opacity: 0.7;
            transition: opacity 0.15s ease;
            will-change: opacity;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .best-selling-products-table th abbr {
            white-space: nowrap;
            text-decoration: none;
            border-bottom: none;
        }

        .best-selling-products-table th:hover span {
            opacity: 1;
        }

/* Desktop table styles */
@media (min-width: 768px) {
    .best-selling-products-table {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-radius: var(--lv-border-radius, 10px);
        min-width: auto;
    }

        .best-selling-products-table th, .best-selling-products-table td {
            padding: 12px 14px;
            font-size: 13px;
            line-height: 1.4;
            box-sizing: border-box;
            margin: 0;
        }

        .best-selling-products-table th {
            white-space: nowrap !important;
            font-size: 11px;
            padding: 12px 14px;
            line-height: 1.4;
        }

            .best-selling-products-table th span {
                font-size: 0.85rem;
            }

        .best-selling-products-table td {
            white-space: normal;
            padding: 12px 14px;
            line-height: 1.4;
        }

        .best-selling-products-table th {
            font-size: 11px;
            letter-spacing: 0.03em;
            min-width: auto;
        }
}

.best-selling-products-table tbody tr {
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    background-color: white;
    will-change: background-color;
}

    .best-selling-products-table tbody tr:nth-child(even) {
        background-color: rgba(248, 250, 252, 0.6);
    }

    .best-selling-products-table tbody tr:hover {
        background: linear-gradient(145deg, var(--lv-hover-background, #f9fafb), #f3f4f6);
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
    }

    .best-selling-products-table tbody tr:last-child td {
        border-bottom: none;
    }

/* Cell Specific Styles */
.best-selling-products-table .sku-cell {
    min-width: 100px;
}

.best-selling-products-table .sku-code {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    background: rgba(102, 126, 234, 0.1);
    padding: 0.15rem 0.3rem;
    border-radius: 3px;
    font-size: 0.8rem;
    color: var(--lv-background-accent, #000000);
    border: 1px solid rgba(102, 126, 234, 0.2);
}

/* Desktop cell styles */
@media (min-width: 768px) {
    .best-selling-products-table .sku-cell {
        min-width: 120px;
    }
}

/* Percentage/Change Indicator Styles - Matching SalesAnalytics (only within table) */
.best-selling-products-table .percentage {
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
    contain: layout style paint;
}

    .best-selling-products-table .percentage.percentage-up {
        background-color: #dcfce7;
        color: #166534;
    }

    .best-selling-products-table .percentage.percentage-down {
        background-color: #fef2f2;
        color: #dc2626;
    }

    .best-selling-products-table .percentage.percentage-zero {
        background-color: #f3f4f6;
        color: #6b7280;
    }

/* Mobile table optimizations */
@media (max-width: 767px) {
    .best-selling-products-table {
        min-width: 1000px !important;
        width: auto !important;
        table-layout: fixed !important;
    }

        .best-selling-products-table th {
            white-space: nowrap !important;
            position: sticky !important;
            top: 0 !important;
            z-index: 20 !important;
            font-size: 9px !important;
            padding: 6px 8px !important;
        }

        .best-selling-products-table td {
            font-size: 10px !important;
            white-space: nowrap !important;
            padding: 6px 8px !important;
        }
}

/* Responsive Styling */
@media (max-width: 768px) {
    .sales-summary {
        flex: 1 1 100%;
    }

    .sales-chart-container {
        flex: 1 1 100%;
    }

    .best-selling-products {
        flex: 1 1 100%;
        width: 100%;
        box-shadow: none;
    }

        .sales-summary-card h2,
        .sales-summary-card h3,
        .sales-summary-card p,
        .best-selling-products h2 {
            font-size: 1rem;
        }

    .best-selling-products-table {
        font-size: 0.8rem;
    }
}

/* Outer container for the dashboard */
.customer-dashboard-container {
    width: 95%;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column; /* top row of cards, then chart below */
    gap: 20px;
    overflow-x: hidden;
}

/* Row of three cards */
.customer-cards-row {
    display: flex;
    grid-template-columns: repeat(4, 1fr); /* Three columns, each ~33% width */
    gap: 20px;
}

@media (max-width: 600px) {
    .customer-cards-row {
        flex-direction: column;
    }
}
/* Individual card */
.customer-info-card {
    flex: 1;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: fit-content;
    box-sizing: border-box;
}

    .customer-info-card h3 {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

.customer-card-detail {
    font-size: 1rem;
    margin-bottom: 10px;
}

.customer-card-total {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
}

.customer-card-new {
    font-size: 1.8rem;
    font-weight: bold;
}

/* Chart container below the cards */
.customer-chart-section {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    box-sizing: border-box;
    width: 100%;
}

    .customer-chart-section h3 {
        font-size: 1.2rem;
        margin-bottom: 15px;
    }

/* Chart options/filters */
.customer-chart-options {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
}

.customer-chart-option {
    padding: 8px 12px;
    font-size: 0.9rem;
    border-radius: 4px;
    background-color: white;
    border: none;
    cursor: pointer;
}

    .customer-chart-option.active {
        font-weight: bold;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

/* Example IDs for the chart canvas elements */
#customerMainChart,
#customerSecondaryChart {
    width: 100%;
    height: 250px;
}

/* --- Responsive adjustments --- */
@media (max-width: 768px) {
    /* Stack cards in a column on small screens */
    .customer-cards-row {
        display: flex;
        flex-direction: column;
        margin-top: 1rem;
    }

    .customer-chart-options {
        flex-wrap: wrap;
        gap: 5px;
    }

    .customer-chart-option {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    /* Adjust card sizes & text */
    .customer-info-card,
    .customer-chart-section {
        margin: 0 auto;
        box-shadow: none;
        width: 100% !important; /* Override the inline 20% / 80% */
    }

    .customer-card-detail {
        font-size: 0.85rem;
    }

    .customer-card-total {
        font-size: 1.5rem;
    }

    .customer-card-new {
        font-size: 1.5rem;
    }

    /* Adjust chart sizing on mobile */
    #customerMainChart,
    #customerSecondaryChart {
        height: 310px;
        max-height: 310px;
    }
}

/*CustomerPlaceHolder*/

.customer-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

/* Placeholder Effects */
/* Placeholder shimmer effect */
.customer-loading-placeholder {
    background: linear-gradient(90deg, #f3f3f3, #e0e0e0, #f3f3f3);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 8px;
}

/* Placeholder text and boxes */
.customer-loading-box {
    height: 20px;
    width: 100%;
    border-radius: 4px;
    margin-bottom: 10px;
}

/* Placeholder cards */
.customer-info-card.customer-loading-placeholder {
    height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Placeholder for the chart */
.customer-chart-section.customer-loading-placeholder {
    height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Animation for shimmer effect */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

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



/*Channel Page CSS*/

/* Header Styling */
.channel-header {
    margin: 30px auto;
    width: 90%;
    padding: 20px;
    background-color: white;
    text-align: center;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
    border-radius: 3px;
}


    .channel-header h3 {
        font-size: 1.5rem;
        margin-bottom: 10px;
        font-weight: bold;
    }

    .channel-header p {
        font-size: 1rem;
        color: #555;
        line-height: 1.6;
        margin: 0 auto;
        max-width: 800px;
    }

.channel-page {
    padding: 20px;
    max-width: 90%;
    background-color: white;
    font-family: Arial, sans-serif;
    text-align: center;
    box-sizing: border-box;
    margin-top: 20px;
    border-radius: 5px;
    margin: auto;
    overflow-x: hidden;
}

.channel-chart-container {
    margin: 20px auto;
    max-width: 100%;
    padding: 20px;
    height: 450px;
    background-color: white;
    text-align: center;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
    border-radius: 3px;
    overflow-x: hidden;
}

@media (max-width: 768px) {
    .channel-page {
        min-height: 400px;
        padding: 10px;
        margin-top: 10px;
        width: 95%;
    }

    .channel-chart-container {
        height: 350px;
        padding: 10px;
        width: 100%;
        border-radius: 5px;
    }
}

/*FilterMenu*/
.filter-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    width: 100%;
    top: 4.8rem;
    padding-right: 200px;
    position: fixed;
    border-bottom: 1px solid #e0e0e0;
    font-family: Arial, sans-serif;
    font-size: 14px;
    z-index: 100;
}

.filter-row {
    display: flex;
    width: 100%;
    justify-content: center;
    position: relative; /* Needed for the ::after element */
    align-items: center;
    height: 66px;
}

    .filter-row.pulse::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        background: rgba(0, 0, 0, 0.1); /* subtle gray pulse */
        border-radius: 50%;
        transform: translate(-50%, -50%);
        animation: pulseOut 0.6s ease-out forwards;
        pointer-events: none;
        z-index: 0;
    }

@keyframes pulseOut {
    0% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(10);
    }
}

.filter-toggle-icon {
    cursor: pointer;
    font-size: 1.35rem;
    padding: 0.5rem;
    margin-left: 1rem;
    display: none;
}

.filters-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Seller mode - date filter centered when market/channel filters are hidden */
.filter-header.seller-mode {
    padding-right: 0;
}

.filter-row.centered {
    justify-content: center;
    gap: 0;
}

.filter-header.seller-mode .filter-row {
    max-width: 400px;
    margin: 0 auto;
}

@media (max-width: 664px) {
    .filter-header {
        position: fixed;
        font-size: 1.2rem;
        height: auto;
        top: 4.9rem;
        gap: 10px;
        text-align: left;
        z-index: 5;
        margin-right: 2rem;
        padding: 0;
        width: 100%;
    }


    .filter-row {
        justify-content: space-between;
        padding: 0 1rem;
        height: 4rem;
    }

    .filter-toggle-icon {
        display: block;
        margin-right: 0.5rem;
    }

    .filters-container {
        flex-direction: column;
        align-items: flex-start;
        background-color: white;
        position: absolute;
        top: 4rem;
        display: flex;
        justify-content: center;
        left: 0;
        padding: 0 1rem;
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #00000073;
        box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15); /* <-- Add this line */
        transition: max-height 0.3s ease, opacity 0.3s ease;
        max-height: 0;
        opacity: 0;
        width: 100%;
        overflow: hidden;
    }

        .filters-container.visible {
            max-height: 700px;
            opacity: 1;
        }

        .filters-container > * {
            margin: 0.2rem 0;
            width: 100%;
        }

    .filter-item {
        justify-content: flex-start;
        width: 100%;
        padding: 5px 0;
    }

        .filter-item .icon {
            font-size: 14px;
        }

        .filter-item .subtext {
            font-size: 11px;
            margin-left: 5px;
        }
}

/*MarketFilter*/
.MarketFilterMenu {
    position: relative;
    width: 300px;
}

    .MarketFilterMenu .dropdown-toggle {
        border-radius: 4px;
        padding: 10px 12px;
        font-size: 14px;
        font-weight: bold;
        color: #333;
        text-align: center;
        display: block;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: none !important;
    }

.dropdown-toggle::after {
    display: none;
}

.MarketFilterMenu .dropdown-menu {
    text-align: center;
    display: block;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 5px;
    padding: 10px 0;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    width: 200px;
    z-index: 1000;
}

.MarketFilterMenu .dropdown-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 14px;
    gap: 8px;
    transition: background-color 0.2s ease;
}

.MarketFilterMenu .only-badge {
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 12px;
    color: #555;
    text-transform: uppercase;
    font-weight: bold;
}

.MarketFilterMenu .flag {
    width: 24px;
    height: 16px;
    border-radius: 3px;
    display: inline-block;
}

.MarketFilterMenu .market-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

/*Channel Component CSS*/
.ChannelDropdown {
    position: relative;
    width: 300px;
}

    .ChannelDropdown .channel-dropdown-toggle {
        border-radius: 4px;
        padding: 10px 12px;
        font-size: 14px;
        font-weight: bold;
        color: #333;
        cursor: pointer;
        text-align: center;
        width: fit-content;
        display: block;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: none !important;
    }

    .ChannelDropdown .channel-dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        text-align: left;
        display: block;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-top: 5px;
        padding: 10px 0;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        width: fit-content;
        z-index: 1000;
    }

    .ChannelDropdown .dropdown-item {
        display: flex;
        align-items: center;
        padding: 5px 10px;
        font-size: 12px;
        gap: 8px;
        transition: background-color 0.2s ease;
    }

    .ChannelDropdown .only-badge {
        background-color: #f5f5f5;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 2px 6px;
        font-size: 12px;
        color: #555;
        text-transform: uppercase;
        font-weight: bold;
    }

    .ChannelDropdown .market-name {
        font-size: 14px;
        font-weight: 500;
        color: #333;
    }

@media (max-width: 664px) {
    .MarketFilterMenu, .ChannelDropdown, .ViewTypeFilterMenu {
        width: 100%;
    }

        .MarketFilterMenu .dropdown-toggle,
        .ChannelDropdown .channel-dropdown-toggle,
        .ViewTypeFilterMenu .dropdown-toggle {
            width: 100%;
            text-align: left;
        }

        .MarketFilterMenu .dropdown-menu,
        .ChannelDropdown .channel-dropdown-menu,
        .ViewTypeFilterMenu .dropdown-menu {
            width: 100%;
            position: relative;
        }
}
/*ViewTypeFilter Component*/
.ViewTypeFilterMenu {
    position: absolute;
    top: 10px;
    right: 1.5rem;
}

    .ViewTypeFilterMenu .dropdown-toggle {
        border-radius: 4px;
        padding: 10px 12px;
        font-size: 12px;
        font-weight: bold;
        color: #333;
        text-align: center;
        display: block;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: none !important;
    }

    .ViewTypeFilterMenu .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        text-align: center;
        display: block;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-top: 5px;
        padding: 10px 0;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        width: 160px;
        z-index: 1000;
    }

    .ViewTypeFilterMenu .dropdown-item {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        font-size: 14px;
        gap: 8px;
        transition: background-color 0.2s ease;
    }

        .ViewTypeFilterMenu .dropdown-item:hover {
            background-color: #f8f9fa;
        }

    .ViewTypeFilterMenu .view-name {
        font-size: 14px;
        font-weight: 500;
        color: #333;
    }

    .ViewTypeFilterMenu input[type="radio"] {
        margin: 0;
        accent-color: #007bff;
    }

/*BrandsFilter Component*/

.BrandsFilterMenu {
    position: relative;
    width: 300px;
}

    .BrandsFilterMenu .brands-dropdown-toggle {
        background-color: #fff;
        border-radius: 4px;
        padding: 10px 12px;
        font-size: 14px;
        font-weight: bold;
        color: #333;
        cursor: pointer;
        text-align: center;
        display: block;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: none !important;
    }

    .BrandsFilterMenu .brands-dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-top: 5px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        height: 600px;
        overflow: hidden;
        overflow-y: auto;
        z-index: 1000;
    }

    /* Dropdown Items */
    .BrandsFilterMenu .dropdown-item {
        display: flex;
        align-items: center;
        padding: 2px 10px;
        font-size: 14px;
        gap: 8px;
        transition: background-color 0.2s ease;
    }

        .BrandsFilterMenu .dropdown-item:hover {
            background-color: #f5f5f5;
            border-color: #999;
        }


    .BrandsFilterMenu input[type="checkbox"] {
        margin: 0;
    }

    .BrandsFilterMenu .only-badge {
        background-color: #f5f5f5;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 2px 6px;
        font-size: 12px;
        color: #555;
        text-transform: uppercase;
        font-weight: bold;
    }

    .BrandsFilterMenu .brand-name {
        font-size: 14px;
        font-weight: 500;
        color: #333;
    }

/* Futuristic Scrollbar Styling */
.brands-dropdown-menu::-webkit-scrollbar {
    width: 9px;
}

.brands-dropdown-menu::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #ff7eb3, #ff4081);
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(255, 105, 180, 0.8);
}

.brands-dropdown-menu::-webkit-scrollbar-track {
    background: #1e1e1e;
    border-radius: 10px;
    box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.5);
}

/* Add a hover effect for the scrollbar thumb */
.brands-dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #ff4081, #ff7eb3);
    box-shadow: 0px 0px 15px rgba(255, 105, 180, 1);
}


.brandmodal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    z-index: 1000;
    overflow-y: auto; /* Enable scrolling in the overlay */
    /* Firefox scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: #888 white;
}

    /* Webkit scrollbar styling for browsers like Chrome and Safari */
    .brandmodal-overlay::-webkit-scrollbar {
        width: 8px; /* Width of the scrollbar */
    }

    .brandmodal-overlay::-webkit-scrollbar-thumb {
        background-color: #888; /* Color of the thumb */
        border-radius: 10px;
    }

        .brandmodal-overlay::-webkit-scrollbar-thumb:hover {
            background-color: #555; /* Darker color when hovered */
        }

    .brandmodal-overlay::-webkit-scrollbar-track {
        background-color: #333; /* Background of the track */
        border-radius: 10px;
    }


.brands-modal-toggle {
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.brandmodal-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 600px;
    height: 100vh; /* Full viewport height */
    overflow-y: auto; /* Enable vertical scrolling */
    background: #fffffffa;
    padding: 20px;
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.3);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}


.brandmodal-overlay.slide-from-right .brandmodal-content {
    transform: translateX(0);
}

.modal-header {
    display: flex;
    margin-top: 4rem;
    justify-content: space-between;
    align-items: center;
}

.close-brands-modal {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

    .close-brands-modal .close-icon {
        width: 24px;
        height: 24px;
        color: #333; /* Adjust color as needed */
        transition: color 0.3s ease;
    }

    .close-brands-modal:hover .close-icon {
        color: black; /* Change on hover */
    }

.modal-search {
    margin: 10px 0;
}

.brand-categories {
    /* space out the columns */
    gap: 1rem;
    /* keep them at the top, so if one is taller, the other remains at its own height */
    align-items: flex-start;
    /* optionally:
       justify-content: space-between; 
       or  justify-content: center;
       depending on your layout preference */
}

.brand-category {
    width: 100%;
    background: #00000000;
    padding: 10px;
    border: 1px solid #cccccc87;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
}


.brand-category-all {
    background: #ffffff75 !important;
    border: 1px solid #cccccc87;
    font-weight: bold !important;
    padding: 10px !important;
}

.brand-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 10px;
}

.section-select-all {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.brand-list {
    display: grid;
    /* Adjust minmax(...) to control the minimum width of each item
     and how many columns you get on larger screens. */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

@media (max-width: 768px) {
    .brand-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px; /* Adjust spacing as needed */
    }

    .section-select-all {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 13px;
    }
}

.modal-header h2 {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0; /* Remove default margin if desired */
}

/* Style each brand section heading: "Selected Brands", "Essential Brands", "Basic Brands" */
.brand-category-header h3 {
    font-size: 18px;
    margin: 0;
    color: #444;
}

.brand-item {
    margin-bottom: 5px;
    margin-top: 10px;
}

.apply-button {
    background-color: #000000;
    border: none;
    border-radius: 4px;
    color: #ebebeb;
    padding: 10px 20px;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

    .apply-button:hover {
        background-color: #000000f2;
        transform: translateY(-2px); /* Slight lift effect */
    }

    .apply-button:active {
        background-color: black;
        transform: translateY(0);
    }

    .apply-button:disabled {
        background-color: #ccc; /* Disabled button color */
        color: #666; /* Disabled text color */
        cursor: not-allowed;
    }


.BrandsFilterMenu .dropdown-search {
    padding: 8px 12px;
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 1;
}


    .BrandsFilterMenu .dropdown-search input[type="text"] {
        width: 100%;
        padding: 10px 36px;
        font-size: 14px;
        border: 1px solid rgba(255, 105, 180, 1);
        border-radius: 20px;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(255, 105, 180, 0.2);
        transition: all 0.3s ease;
        outline: none;
    }

        /* Hover effect for the input field */
        .BrandsFilterMenu .dropdown-search input[type="text"]:hover {
            border-color: rgba(255, 20, 147, 1);
        }

        /* Focus effect for the input field */
        .BrandsFilterMenu .dropdown-search input[type="text"]:focus {
            border-color: rgba(255, 20, 147, 1);
            box-shadow: 0 2px 6px rgba(255, 20, 147, 0.5);
        }


    .BrandsFilterMenu .dropdown-search::before {
        content: '\1F50D';
        font-size: 18px;
        color: rgba(255, 105, 180, 1);
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
        pointer-events: none;
    }

/*DateFilter Component*/
.CalendarFilterMenu {
    position: relative;
    max-width: 450px;
    width: 400px;
}

.calendar-dropdown-toggle {
    font-weight: bold;
    border-radius: 4px;
    padding: 10px;
    cursor: pointer;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    white-space: nowrap; /* Prevent text from wrapping */
}

.calendar-item {
    position: relative;
    display: inline-block;
    cursor: pointer;
    font-family: Arial, sans-serif;
}


.calendar-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-icon {
    font-size: 16px;
}

.calendar-subtext {
    font-size: 12px;
    color: #888;
}

.calendar-dropdown-menu {
    position: absolute;
    top: 40px;
    left: 0;
    background: white;
    border: 1px solid rgba(200, 200, 200, 0.8);
    border-radius: 8px;
    box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.05);
    width: fit-content;
    z-index: 5000;
    transform: translateZ(0); /* Ensure stacking context */
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 1;
}

@media (max-width: 768px) {
    .calendar-dropdown-menu {
        position: absolute;
        top: 40px;
        left: 1rem;
        transform: translateZ(0); /* Creates a new stacking context */
        background: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        width: fit-content;
        z-index: 1000;
        max-height: 380px;
        display: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
        opacity: 1;
    }
}

input [type="date"] {
    width: 100%;
    padding: 5px;
    margin: 5px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

button {
    all: unset;
}

.button-container {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.custom-btn-daily,
.custom-btn-weekly {
    background-color: white;
    color: black;
    padding: 4px 8px;
    font-size: 11.2px;
    border: none;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    height: 28px;
    line-height: 1;
    transition: background-color 0.2s, color 0.2s;
}


    .custom-btn-daily:hover,
    .custom-btn-weekly:hover {
        background-color: rgb(245, 245, 245);
    }


    .custom-btn-daily.active,
    .custom-btn-weekly.active {
        background-color: #000000;
        color: #fff;
        border: 1px solid #b8abb900;
    }

.calendar-apply-button {
    background-color: white;
    color: black;
    padding: 8px 12px;
    border: 1px solid black;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}



.tabs {
    display: flex;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
}

.tab-content {
    position: relative; /* Ensures z-index is applied */
    display: block;
}

.tabs button {
    flex: 1;
    padding: 10px;
    border: none;
    background: none;
    font-size: 14px;
    text-align: center;
    border-bottom: 2px solid transparent;
}

    .tabs button.active {
        border-bottom: 2px solid black;
        font-weight: bold;
    }


.dropdown-item {
    font-size: 0.9rem;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    cursor: pointer;
    display: block;
    color: #333;
}

    .dropdown-item p {
        font-size: 0.8rem;
        margin: 0;
        line-height: 1.6;
        opacity: 0.9;
    }

    .dropdown-item:hover {
        background: linear-gradient(135deg, #f8f9fa, #e6e6e6);
        transform: translateX(4px);
        box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
    }

/*OrderPage CSS*/

.order-card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

@media (max-width: 768px) {
    .order-card {
        width: 100%;
        margin: 20px auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.order-card h3 {
    font-size: 16px;
    color: #333333;
    margin-bottom: 10px;
}

.order-card h1 {
    font-size: 2rem;
    font-weight: bold;
    margin: 10px 0;
    color: #000000;
}

.order-card p {
    font-size: 14px;
    color: #666666;
    margin-bottom: 20px;
}

.order-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .order-list li {
        display: grid;
        grid-template-columns: 30px auto 60px 100px;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }

.flag {
    font-size: 16px;
}


.percentage-up {
    color: #6dd32f;
    font-size: 0.9rem;
    font-weight: bold;
}

.percentage-down {
    color: red;
    font-size: 0.9rem;
    font-weight: bold;
}

.percentage-zero {
    color: gray;
    font-size: 0.9rem;
    font-weight: bold;
}


.order-value {
    font-weight: bold;
    color: #333;
    text-align: right; /* Align order values to the right */
}

.orders-dashboard {
    width: 95%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    overflow-x: hidden;
}

.orders-chart-container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    display: flex;
    height: 400px;
    flex-direction: column;
    gap: 15px;
    flex: 3;
    background-color: white;
    width: 60%;
}

/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
    .orders-dashboard {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 0 10px;
    }

    .orders-chart-container {
        min-height: 400px;
        width: 100%;
        margin: 0;
    }
}

@media (min-width: 769px) {
    .mobile-view {
        display: none;
    }

    .best-selling-products-table {
        display: table;
    }
}

/* Responsive Switch */
@media (max-width: 764px) {
    .best-selling-products-table {
        display: none;
        text-align: center;
    }

    .mobile-view {
        display: block;
    }

        /* General Card Design */
        .mobile-view .card {
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

            .mobile-view .card:hover {
                transform: translateY(-5px);
                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
            }

        /* Header Styles */
        .mobile-view .card-header {
            font-size: 0.8rem;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
            text-transform: capitalize;
            background-color: white;
            padding-bottom: 5px;
        }

        /* Body Content */
        .mobile-view .card-body {
            display: flex;
            flex-direction: column;
            gap: 10px;
            font-size: 0.9rem;
        }

    .percentage-up {
        color: #6dd32f;
        font-size: 0.8rem;
        font-weight: bold;
    }

    .percentage-down {
        color: red;
        font-size: 0.8rem;
        font-weight: bold;
    }

    /* Body Text */
    .mobile-view .card-body p {
        margin: 0;
        font-size: 0.85rem;
        color: #555;
    }

    /* Growth Indicator */
    .mobile-view .growth {
        color: #4caf50;
        font-weight: bold;
        background-color: rgba(76, 175, 80, 0.1);
        padding: 4px 8px;
        border-radius: 6px;
        display: inline-block;
        font-size: 14px;
    }

    /* Data Points */
    .mobile-view .data-point {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #ffffff;
        border: 1px solid #eee;
        border-radius: 6px;
        padding: 8px 12px;
        font-size: 14px;
        color: #333;
        font-weight: 500;
    }

    /* Insights Divider */
    .mobile-view .card-body .divider {
        height: 1px;
        background-color: #ddd;
        margin: 10px 0;
        width: 100%;
    }


    .sales-header-container {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .sales-search-container {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .sales-search-container input {
        width: 100%;
    }
}

/*/Warning*/
@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

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


/* Desktop Alert */
.alert-market {
    display: block;
    z-index: 300;
    right: 0;
    bottom: 0;
    background-color: #FFAB91;
    position: fixed;
    font-weight: bold;
    color: black;
    padding: 1rem 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    animation: slideInFromRight 0.5s ease-out;
}

.alert-market-mobile {
    display: none;
}


@media (max-width: 764px) {
    .alert-market {
        display: none !important;
    }

    .alert-market-mobile {
        height: fit-content;
        z-index: 300;
        font-size: 0.8rem;
        bottom: 0;
        width: 21rem;
        background-color: #FFAB91;
        position: fixed;
        font-weight: bold;
        color: black;
        padding: 1rem 1rem;
        margin-right: 1rem;
        margin-bottom: 1rem;
        border: 1px solid transparent;
        border-radius: .25rem;
        animation: slideInFromRight 0.7s ease-out;
    }
}

/* For Desktop Devices */
@media (min-width: 765px) {
    .alert-market-mobile {
        display: none !important;
    }

    .alert-market {
        display: block !important;
    }
}



/* Desktop Alert */
.alert-channel {
    display: block; /* Default for desktop */
    z-index: 300;
    right: 0;
    bottom: 8rem;
    background-color: #FFAB91;
    position: fixed;
    font-weight: bold;
    color: black;
    padding: 1rem 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    animation: slideInFromRight 0.5s ease-out;
}


.alert-channel-mobile {
    display: none;
}



@media (max-width: 764px) {
    .alert-channel {
        display: none !important;
    }

    .brand-item {
        margin-bottom: 5px;
        margin-top: 10px;
        font-size: 12px;
    }

    .alert-channel-mobile {
        height: fit-content;
        z-index: 300;
        font-size: 0.8rem;
        bottom: 3.5rem;
        width: 21rem;
        background-color: #FFAB91;
        position: fixed;
        font-weight: bold;
        color: black;
        padding: 1rem 1rem;
        margin-right: 1rem;
        margin-bottom: 1rem;
        border: 1px solid transparent;
        border-radius: .25rem;
        animation: slideInFromRight 1s ease-out;
    }
}

/* For Desktop Devices */
@media (min-width: 765px) {
    .alert-channel-mobile {
        display: none !important;
    }

    .alert-channel {
        display: block !important;
    }
}

.alert-brand {
    display: block;
    position: sticky; /* Position relative to .brandmodal-content */
    right: 1rem;
    bottom: 4rem; /* Adjust as needed */
    background-color: #FFAB91;
    font-weight: bold;
    color: black;
    padding: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    animation: slideInFromRight 0.5s ease-out;
    z-index: 300;
}

/* Mobile Alert Hidden by Default */
.alert-brand-mobile {
    display: none;
}

/* Media Queries */

/* For Mobile Devices */
@media (max-width: 764px) {
    .alert-brand {
        display: none !important;
    }

    .alert-brand-mobile {
        height: fit-content;
        z-index: 300;
        font-size: 0.8rem;
        bottom: 7rem;
        width: 21rem;
        background-color: #FFAB91;
        position: sticky;
        font-weight: bold;
        color: black;
        padding: 1rem 1rem;
        margin-right: 1rem;
        margin-bottom: 1rem;
        border: 1px solid transparent;
        border-radius: .25rem;
        animation: slideInFromRight 1s ease-out;
    }
}

/* For Desktop Devices */
@media (min-width: 765px) {
    .alert-brand-mobile {
        display: none !important;
    }

    .alert-brand {
        display: block !important;
    }
}

/*First in Cart Page*/

/* Heading Styling */
/* First In Cart Container */
.firstincart-container {
    font-family: Arial, sans-serif;
    width: 80%;
    background-color: #ffffff;
    padding: 15px;
    position: absolute;
    border-radius: 8px;
    top: 6rem;
    box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.1);
    border-color: black;
    left: calc(50% + 110px); /* Centrera horisontellt med hänsyn till sidopanelen */
    transform: translateX(-50%); /* Justera för att centrera exakt */
    z-index: 10;
}

@media (max-width: 764px) {
    .firstincart-container {
        font-family: Arial, sans-serif;
        width: 90%;
        background-color: #ffffff;
        padding: 15px;
        position: absolute;
        border-radius: 8px;
        top: 0rem;
        left: 1rem;
        box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.1);
        border-color: black;
        left: 0;
        transform: none;
        z-index: 10;
    }
}


/* Heading Styling */
.firstincart-container h2 {
    font-size: 1.2rem;
    margin-bottom: 20px; /* Increased margin below heading */
}

/* Tabs Styling */
.firstincart-tabs {
    margin-bottom: 20px; /* Increased spacing below tabs */
}

.firstincart-tab-button {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 14px;
    cursor: pointer;
}

.firstincart-tab-button-active {
    background-color: #fff;
    font-weight: bold;
}

/* Search Container Styling */
.firstincart-search-container {
    margin-bottom: 25px; /* Increased spacing below search bar */
}

.firstincart-search-box {
    display: flex;
    align-items: center;
    gap: 5px;
}

.firstincart-search-icon {
    color: #888;
}

#firstincartSearchInput {
    width: 300px;
    padding: 10px 20px 10px 40px;
    font-size: 16px;
    border: none;
    border-bottom: 2px solid #ddd;
    outline: none;
    transition: border-color 0.3s ease;
}

/* Table Styling */
.firstincart-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-top: 10px; /* Added margin above the table */
}

    .firstincart-table th,
    .firstincart-table td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
        transition: all 0.3s ease;
    }

    .firstincart-table th {
        background-color: black;
        color: #fff;
        border-bottom: none;
    }

        /* Add border-radius to the left-most (first) header cell */
        .firstincart-table th:first-child {
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }

        /* Add border-radius to the right-most (last) header cell */
        .firstincart-table th:last-child {
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
        }


/* First In Cart Progress Bar */
.firstincart-progress-bar {
    background-color: #e6e6e6;
    border-radius: 4px;
    position: relative;
    height: 24px;
    width: 100%;
    overflow: hidden;
    border: 1px solid #ccc;
}

/* Progress Fill with Animation */
.firstincart-progress-fill {
    background: linear-gradient(to left, #66bb6a, #a5d6a7); /* Lighter green gradient */
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px 0 0 4px; /* Rounded corners on the left */
    width: 0; /* Initial width set to 0 */
    animation: fillAnimation 1.5s ease forwards; /* Animation applied */
}
/* Progress Text */
.firstincart-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: black; /* Dark text for readability */
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    z-index: 1;
}

/* Animation Keyframes */
@keyframes fillAnimation {
    from {
        width: 0;
    }

    to {
        width: var(--progress-width); /* Custom property for dynamic width */
    }
}


.firstincart-row {
    transition: all 0.3s ease;
}

    .firstincart-row:hover {
        background-color: #f0f0f0;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        cursor: default;
    }
/*Headbrandspage*/
.headbrandslive-container {
    display: grid;
    grid-template-columns: 3fr 1fr; /* left side twice as wide as right */
    grid-template-rows: auto 1fr; /* auto height for cards, charts fill rest */
    grid-template-areas:
        "cards table"
        "charts table";
    gap: 20px;
    width: 100%;
    max-width: 1600px;
    padding: 20px;
    box-sizing: border-box;
    margin: -1rem auto 0;
    position: relative; /* establish a new stacking context */
    z-index: 2;
}

.headbrandslive-top-products caption {
    caption-side: top !important;
    padding-top: .8rem;
    padding-bottom: .8rem;
}

/* 2) Cards go in the "cards" cell */
.headbrandslive-top-row {
    grid-area: cards;
}

.headbrandslive-cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

.headbrandslive-card {
    position: relative;
    flex: 1 1 240px;
    background: #fff;
    border-radius: 12px;
    padding: 1.35rem 2rem 2rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform .3s, box-shadow .3s;
}

    .headbrandslive-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    }

    .headbrandslive-card h3 {
        margin-bottom: .5rem;
        font-size: 1rem;
        color: #333;
        font-weight: bold;
    }

    .headbrandslive-card h1 {
        margin-top: 1.5rem;
        font-size: 1.5rem;
        font-weight: 700;
    }

    .headbrandslive-card .icon-wrapper {
        position: absolute;
        top: 1rem;
        left: 0.6rem;
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translateZ(0);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
        /* Enhanced 3D icon styling */
        .headbrandslive-card .icon-wrapper i {
            font-size: 1.1rem;
            opacity: 1;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
            transition: all 0.3s ease;
            transform: translateZ(0);
        }

    /* Enhanced hover effects for 3D depth */
    .headbrandslive-card:hover .icon-wrapper {
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2), 0 6px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    }

        .headbrandslive-card:hover .icon-wrapper i {
            transform: scale(1.1);
            filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
        }



/* 4. Solid icon colors */
.orders-icon i {
    color: #1976d2;
    text-shadow: 0 1px 2px rgba(25, 118, 210, 0.3);
}

.aov-icon i {
    color: #388e3c;
    text-shadow: 0 1px 2px rgba(56, 142, 60, 0.3);
}

.sales-icon i {
    color: #f57c00;
    text-shadow: 0 1px 2px rgba(245, 124, 0, 0.3);
}

.hb-percentage {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    padding: 0.15em 0.5em;
    border-radius: 0.75em;
    line-height: 1;
    background: transparent;
    color: inherit;
    cursor: default;
}

    .hb-percentage::after {
        content: attr(data-tooltip);
        position: absolute;
        left: 50%;
        bottom: -2rem; /* start just below the pill */
        transform: translateX(-50%) translateY(0.5em);
        white-space: nowrap;
        padding: 0.25em 0.5em;
        font-size: 0.75rem;
        background: rgba(0, 0, 0, 0.75);
        color: #fff;
        border-radius: 0.25em;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease-out, transform 0.2s ease-out;
        z-index: 10;
    }

    /* On hover, slide it up into view */
    .hb-percentage:hover::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    .hb-percentage.percentage-up {
        background-color: rgb(40 167 69 / 5%);
        color: #6dd32f; /* bootstrap‐style green */
    }

    .hb-percentage.percentage-down {
        background-color: rgba(220, 53, 69, 0.1); /* light red fill */
        color: #dc3545; /* bootstrap‐style red */
    }

    /* if you ever need a neutral "no change" state: */
    .hb-percentage.percentage-neutral {
        background-color: rgba(108, 117, 125, 0.1); /* light gray fill */
        color: #6c757d; /* mid‐gray */
    }

/* 3) Charts container in the "charts" cell, stacking its two children */
.headbrandslive-charts-container {
    grid-area: charts;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.headbrandslive-chart-container {
    flex: 1 1 auto;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    position: relative;
    height: 400px; /* Fixed height */
    min-height: 400px; /* Prevent shrinking */
    max-height: 400px; /* Prevent growing */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

    .headbrandslive-chart-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
    }

    .headbrandslive-chart-container:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    .headbrandslive-chart-container h3 {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 700;
        color: #2d3748;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        letter-spacing: -0.02em;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    }

.headbrandslive-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    gap: 1rem;
    flex-wrap: wrap;
}

    .headbrandslive-chart-header h3 {
        margin: 0;
        flex: 1;
        min-width: 200px;
    }

.headbrandslive-chart-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.headbrandslive-view-selector {
    position: relative;
    z-index: 10;
}

.headbrandslive-chart-container canvas {
    margin-top: 1rem;
    width: 100% !important;
    height: calc(100% - 2rem) !important;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.06));
    border-radius: 8px;
}

/* 4) Table + market selector spans both grid rows in the right column */
.headbrandslive-market-container {
    position: relative;
    grid-area: table;
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 10px;
    gap: 10px;
    border-radius: 10px;
    align-items: flex-start;
}

.headbrandslive-market-selector {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 1rem;
}

.headbrandslive-top-products {
    flex-grow: 1; /* <-- THIS IS THE ONLY LINE YOU NEED TO ADD */
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    font-family: Inter, sans-serif;
    font-size: .9rem;
    color: #333;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    overflow: hidden;
}

    /* Header cells */
    .headbrandslive-top-products thead th {
        color: white;
        font-weight: 600;
        font-size: 11px;
        background: linear-gradient(90deg, #000000, #1e1e1e);
        text-align: left;
        padding: 10px;
        border-bottom: 2px solid #ddd;
        white-space: nowrap;
    }

    /* Table body cells - general styles */
    .headbrandslive-top-products tbody td {
        padding: 12px 10px;
        color: #333;
        font-weight: 600;
        font-size: 11.3px;
        border-bottom: 1px solid #e0e0e0;
        text-align: left;
        vertical-align: top;
    }

        /* First column - Brand */
        .headbrandslive-top-products tbody td:first-child {
            width: 15%;
            min-width: 100px;
            max-width: 150px;
            white-space: normal;
            word-wrap: break-word;
            line-height: 1.3;
        }

        /* Second column - Article Name */
        .headbrandslive-top-products tbody td:nth-child(2) {
            width: 45%;
            min-width: 185px;
            white-space: normal;
            word-wrap: break-word;
            line-height: 1.3;
        }

        /* Third column - Quantity */
        .headbrandslive-top-products tbody td:nth-child(3) {
            width: 20%;
            white-space: nowrap;
            text-align: center;
        }

        /* Fourth column - Net Sales */
        .headbrandslive-top-products tbody td:nth-child(4) {
            width: 20%;
            white-space: nowrap;
            text-align: center;
        }

    /* Striped rows */
    .headbrandslive-top-products tbody tr:nth-child(odd) {
        background: linear-gradient(90deg, #d9d9d9, #ffffff);
    }

    .headbrandslive-top-products tbody tr:nth-child(even) {
        background-color: white;
    }

    /* Hover state */
    .headbrandslive-top-products tbody tr:hover {
        background: #ff000019;
        transition: background 0.3s ease;
    }

    /* Remove bottom border on last row */
    .headbrandslive-top-products tbody tr:last-child td {
        border-bottom: none;
    }

    /* Sortable table headers */
    .headbrandslive-top-products thead th.sortable {
        cursor: pointer;
        white-space: nowrap;
    }

/* Sort indicator span */
.sort-indicator {
    margin-left: 4px;
}

/* Empty state cells */
.headbrandslive-top-products .empty-state-cell {
    text-align: left;
    padding: 15px;
    font-size: 0.9rem;
    font-weight: bold;
}

/* Percentage text in table cells */
.headbrandslive-top-products .percentage-text {
    font-size: 11.3px;
}

/* Search container spacing */
.headbrandslive-search-container {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Pagination container styles */
.pagination-container {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    justify-content: flex-end;
}

/* Pagination arrow styles */
.pagination-arrow {
    cursor: pointer;
    margin-right: 8px;
}

    .pagination-arrow.disabled {
        cursor: not-allowed;
    }

/* Pagination page info spacing */
.pagination-page-info {
    margin-right: 8px;
}

/* ensure the number itself transitions */
.animate-sales,
.animate-order {
    transition: color 0.3s ease;
}

/* on card hover, turn both green */
.headbrandslive-card:hover .animate-sales,
.headbrandslive-card:hover .animate-order {
    color: #6dd32f;
}

.headbrandslive-search-container {
    position: relative;
    overflow: visible;
    border-radius: 6px;
}

    /* style your input as before */
    .headbrandslive-search-container input {
        position: relative;
        z-index: 1;
        width: 100%;
        padding: 0.4rem;
        border: 1px solid #ccc;
        border-radius: inherit;
        background: white;
        outline: none;
        transition: box-shadow 0.3s ease; /* smooth fade-in of shadow */
        box-sizing: border-box;
    }

        .headbrandslive-search-container input:focus {
            outline: none; /* remove default outline */
            box-shadow: 0 0 8px rgb(137 138 163 / 60%), 0 0 16px rgb(146 150 151 / 40%);
        }


/* 5) keep your last-updated styling */
.last-updated-container {
    position: absolute; /* fixed so it stays in viewport */
    top: 5rem; /* or whatever vertical offset you like */
    left: 240px; /* move left edge to center */
    font-size: 11px;
    color: #292929;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    padding: 10px 5px;
    border-radius: 8px;
    transition: all .3s;
}

    .last-updated-container:hover {
        transform: scale(1.05);
        color: black;
    }


/* Responsive Layout */
@media (max-width: 768px) {
    .headbrandslive-top-row {
        flex-direction: column;
    }

    .headbrandslive-chart-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        margin-bottom: 0.5rem;
    }

        .headbrandslive-chart-header h3 {
            width: 100%;
            min-width: auto;
            font-size: 0.9rem;
            line-height: 1.2;
        }

    .headbrandslive-chart-controls {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .black-week-toggle {
        font-size: 0.75rem;
        padding: 6px 12px;
        text-align: center;
        flex: none;
        min-width: auto;
    }

    .headbrandslive-view-selector {
        width: 100%;
    }

        .headbrandslive-view-selector #chartView {
            width: 100%;
            max-width: 100%;
            min-width: auto;
            box-sizing: border-box;
        }

    .headbrandslive-chart-container {
        padding: 1rem;
        overflow: hidden;
        height: auto !important;
        min-height: 350px !important;
        max-height: none !important;
        display: flex;
        flex-direction: column;
    }

        .headbrandslive-chart-container h3 {
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }

        .headbrandslive-chart-container canvas {
            margin-top: 0.5rem !important;
            flex: 1;
            min-height: 250px;
            max-height: 280px !important;
            width: 100% !important;
        }

    .headbrandslive-search-container {
        position: relative;
        display: none;
        align-items: center;
        width: 100%;
    }

    .headbrandslive-container {
        position: static !important; /* override absolute if used */
        display: flex; /* switch to flex layout */
        flex-direction: column; /* stack elements vertically */
        width: 100% !important;
        left: auto !important;
        top: auto !important;
        margin: 0 auto;
        padding: 20px;
    }

    .headbrandslive-market-selector {
        position: fixed; /* lock it to the viewport */
        top: 5rem; /* adjust so it doesn't overlap "Last Updated" */
        left: 0;
        right: 0;
        z-index: 9999;
        padding: 10px;
        color: transparent !important;
        text-shadow: 0 0 0 #000 !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }

        .headbrandslive-market-selector
        .MarketFilterMenu
        .dropdown-toggle > span,
        .headbrandslive-market-selector
        .MarketFilterMenu
        .dropdown-toggle > small {
            display: none !important;
        }

        .headbrandslive-market-selector
        .ViewTypeFilterMenu {
            margin-top: 10px;
            width: 100% !important;
        }

            .headbrandslive-market-selector .ViewTypeFilterMenu .dropdown-toggle {
                display: none !important;
                width: 100% !important;
                text-align: left !important;
                justify-content: flex-start !important;
                padding: 10px !important;
            }

        .headbrandslive-market-selector .MarketFilterMenu .dropdown-toggle {
            display: inline-block !important;
            width: 20px !important; /* adjust to exactly fit your 20px icon + padding */
            padding: 4px !important; /* optional: trim any extra left/right padding */
            overflow: hidden !important;
            white-space: nowrap !important;
        }

    .headbrandslive-top-products {
        width: 100%;
        border-collapse: collapse;
        font-family: "Inter", sans-serif;
        font-size: 0.9rem;
        color: #333;
        background: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgb(0 0 0 / 41%);
        overflow: hidden;
        display: none;
    }

    .headbrandslive-market-selector .MarketFilterMenu .dropdown-toggle svg {
        background: white;
        color: #70897340 !important;
        fill: #ffffff !important;
        stroke: #0b0c0ce0 !important;
        width: 24px;
        height: 24px;
        border-radius: 10px;
    }

    .headbrandslive-top-products thead th {
        color: white;
        font-weight: 600;
        font-size: 11px;
        background: linear-gradient(90deg, #000000, #1e1e1e);
        text-align: left;
        padding: 10px;
        border-bottom: 2px solid #ddd;
    }

    /* Default visible state for the last-updated container */
    .last-updated-container {
        position: fixed;
        top: 5.5rem;
        left: 18%;
        z-index: 9999;
        font-size: 11px;
        color: #333;
        font-family: 'Roboto', sans-serif;
        padding: 10px 5px;
        border-radius: 8px;
        transition: opacity 0.3s ease, transform 0.3s ease;
        opacity: 1;
    }

        .last-updated-container:focus-within p,
        .last-updated-container.clicked p {
            transform: scale(1.2);
            transition: transform 0.3s ease;
        }

        .last-updated-container p {
            margin: 0;
            color: #495057;
            font-weight: 500;
            transition: transform 0.3s ease;
        }

        .last-updated-container.hidden {
            opacity: 0;
            transform: translateY(-20px);
            pointer-events: none;
        }

        .last-updated-container.visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

    .headbrandslive-cards-container,
    .headbrandslive-market-container,
    .headbrandslive-charts-container {
        width: 100%;
        position: relative;
        top: 0;
    }

    .headbrandslive-cards-container {
        order: 1;
    }

    .headbrandslive-card {
        width: 100%;
        margin-bottom: 10px;
    }

    .headbrandslive-market-container {
        order: 2 !important; /* Market filter and table move here */
        left: 3px;
        background: #ffffff00;
    }

    .headbrandslive-charts-container {
        order: 3;
    }
}



/* Scoped to only the chart view selector in headbrandslive-view-selector */
.headbrandslive-view-selector #chartView {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 8px 36px 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #2d3748;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    cursor: pointer;
    line-height: 1.4;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMyZDM3NDgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1jaGV2cm9ucy11cC1kb3duIj48cGF0aCBkPSJtNyAxNSA1IDUgNS01Ii8+PHBhdGggZD0ibTcgOSA1LTUgNSA1Ii8+PC9zdmc+);
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    min-width: 100px;
    max-width: 130px;
    box-sizing: border-box;
    flex-shrink: 0;
}

    .headbrandslive-view-selector #chartView:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
        border-color: rgba(255, 255, 255, 0.6);
    }

    .headbrandslive-view-selector #chartView:focus {
        outline: none;
        border-color: rgba(102, 126, 234, 0.4);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.15), 0 3px 8px rgba(102, 126, 234, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

/* Responsive Layout */
@media (max-width: 768px) {


    .wkno-top-product {
        display: none;
        width: 100%;
        border-collapse: collapse;
        font-family: "Inter", sans-serif;
        font-size: 0.9rem;
        color: #333;
        background: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgb(0 0 0 / 41%);
        overflow: hidden;
    }
}


/*WKNO*/

.wkno-top-product {
    margin-top: 2.8rem;
    width: 100%; /* fallback if container is smaller */
    border-collapse: collapse;
    font-family: "Inter", sans-serif;
    font-size: 0.9rem;
    color: #333;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgb(0 0 0 / 41%);
    overflow: hidden;
}

    .wkno-top-product thead th {
        color: white;
        font-weight: 600;
        font-size: 11.3px;
        background: linear-gradient(90deg, #000000, #1e1e1e);
        text-align: left;
        padding: 10px;
        border-bottom: 2px solid #ddd;
        white-space: nowrap;
    }

        /* Add specific column widths for WKNO table */
        .wkno-top-product thead th:nth-child(1) { /* Brand column */
            width: 20%;
            min-width: 120px;
            max-width: 180px;
        }

        .wkno-top-product thead th:nth-child(2) { /* Article Name column */
            width: 40%;
            min-width: 200px;
            max-width: 300px;
        }

        .wkno-top-product thead th:nth-child(3) { /* Quantity column */
            width: 20%;
            max-width: 120px;
            white-space: nowrap;
        }

        .wkno-top-product thead th:nth-child(4) { /* Net Sales column */
            width: 20%;
            max-width: 120px;
            white-space: nowrap;
        }

    .wkno-top-product tbody td {
        padding: 12px 10px;
        color: #333;
        font-weight: 500;
        font-size: 11.3px;
        border-bottom: 1px solid #e0e0e0;
        text-align: left;
        vertical-align: top; /* Align content to top for multi-line text */
    }

        .wkno-top-product tbody td:nth-child(1) { /* Brand column */
            width: 20%;
            min-width: 120px;
            max-width: 180px;
            white-space: normal; /* Allow wrapping */
            word-wrap: break-word;
            overflow-wrap: break-word;
            /* Limit to 2 lines */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.3;
            max-height: calc(1.3em * 2); /* 2 lines max */
        }

        .wkno-top-product tbody td:nth-child(2) { /* Article Name column */
            width: 40%;
            min-width: 200px;
            max-width: 300px;
            white-space: normal; /* Allow wrapping */
            word-wrap: break-word;
            overflow-wrap: break-word;
            /* Limit to 2 lines */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.3;
            max-height: calc(1.3em * 2); /* 2 lines max */
        }

        .wkno-top-product tbody td:nth-child(3) { /* Quantity column */
            width: 20%;
            max-width: 120px;
            white-space: nowrap; /* Keep numbers on single line */
        }

        .wkno-top-product tbody td:nth-child(4) { /* Net Sales column */
            width: 20%;
            max-width: 120px;
            white-space: nowrap; /* Keep numbers on single line */
        }

    .wkno-top-product tbody tr:hover {
        background: #f9f9f9;
    }

    .wkno-top-product tbody tr:last-child td {
        border-bottom: none;
    }

    /* Add striped row effect */
    .wkno-top-product tbody tr:nth-child(odd) {
        background: linear-gradient(90deg, #d9d9d9, #ffffff);
    }

    .wkno-top-product tbody tr:nth-child(even) {
        background-color: white;
    }

    .wkno-top-product tbody tr:hover {
        background: #ff000019;
        transition: background 0.3s ease;
    }

/*Customer Filter*/

.CustomerDropdown {
    position: relative;
    width: 300px;
}

    .CustomerDropdown .customer-dropdown-toggle {
        background-color: #fff;
        border-radius: 4px;
        padding: 10px 12px;
        font-size: 14px;
        font-weight: bold;
        color: #333;
        cursor: pointer;
        text-align: center;
        width: fit-content;
        display: block;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: none !important;
    }

    .CustomerDropdown .customer-dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        text-align: left;
        display: block;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-top: 5px;
        padding: 10px 0;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        width: fit-content;
        z-index: 1000;
    }

    .CustomerDropdown .dropdown-item {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        font-size: 12px;
        gap: 8px;
        transition: background-color 0.2s ease;
    }

    .CustomerDropdown .only-badge {
        background-color: #f5f5f5;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 2px 6px;
        font-size: 12px;
        color: #555;
        text-transform: uppercase;
        font-weight: bold;
    }

    .CustomerDropdown .customer-name {
        font-size: 14px;
        font-weight: 500;
        color: #333;
    }

    .CustomerDropdown .dropdown-item.active {
        background-color: #f0f0f0; /* Highlight color */
        font-weight: bold;
    }


/* Basic example */
.dropdown-link {
    color: #333; /* Override text color */
    text-decoration: none; /* Remove underline, if desired */
    padding: 8px 12px; /* Add padding to mimic a button style */
    display: inline-block; /* So the padding is clickable */
}

    /* Hover/focus states */
    .dropdown-link:hover,
    .dropdown-link:focus {
        color: #333; /* A different color on hover */
        text-decoration: none;
    }

/* Ensure NavLink components in CustomerDropdown have proper styling */
.CustomerDropdown .dropdown-item a {
    color: #333 !important;
    text-decoration: none !important;
    padding: 8px 12px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}

    .CustomerDropdown .dropdown-item a:hover,
    .CustomerDropdown .dropdown-item a:focus {
        color: #333 !important;
        text-decoration: none !important;
        background-color: transparent;
    }

    .CustomerDropdown .dropdown-item a.active {
        color: #333 !important;
        font-weight: bold;
        background-color: #f0f0f0;
    }


/*NewReg Page*/


/* NEW REG CARD (similar to .sales-card) */
.newreg-card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

@media (max-width: 768px) {
    .newreg-card {
        width: 100%;
        margin-top: 20px;
        align-items: center;
    }
}

/* HEADINGS & TEXT inside the .newreg-card */

.newreg-card h3 {
    font-size: 1.4rem;
    color: #333333;
    margin-bottom: 10px;
}

.newreg-card h1 {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 10px 0;
    color: black;
}

.newreg-card p {
    font-size: 1.6rem;
    color: black;
    margin-bottom: 20px;
}

/* NEW REG LIST (similar to .sales-list) */
.newreg-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .newreg-list li {
        display: grid;
        grid-template-columns: 30px 50px 70px 50px;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
        padding-top: 15px;
    }

/* If you need a custom .newreg-value class (like .sales-value) */
.newreg-value {
    display: inline-block;
    white-space: nowrap;
    font-weight: bold;
    font-size: 0.85rem;
    color: #333;
    text-align: right;
}

/* Container for the entire customer table section */
.customer-table-container {
    width: 95.5%;
    margin: auto;
    background-color: #ffffff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.1);
    border-color: black;
}

/* The table itself */
.customer-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    table-layout: fixed; /* key to prevent shifting */
}

    .customer-table th,
    .customer-table td {
        padding: 8px;
        /* Optionally set a width for each column if needed, e.g.:
       width: 25%; or specific pixel widths
    */
        overflow: hidden;
        text-overflow: ellipsis; /* prevents text from overflowing in narrow columns */
    }

    /* Row hover transitions */
    .customer-table tr {
        transition: all 0.3s ease;
    }

    .customer-table tbody tr:hover {
        background-color: #f0f0f0;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        transform: none; /* Remove scale to avoid overlap issues */
        cursor: default;
    }

    /* Table cells */
    .customer-table td {
        padding: 8px;
        text-align: left;
        font-size: 0.75rem;
        border-bottom: 1px solid #ddd;
        transition: all 0.3s ease;
    }

    /* Table headers */
    .customer-table th {
        padding: 8px;
        font-size: 0.8rem;
        background-color: black;
        color: #fff;
        border-bottom: none;
    }

    .customer-table thead tr:hover {
        background-color: black;
        transform: none;
        cursor: default;
    }

    /* Rounded corners on the first and last header cells */
    .customer-table th:first-child {
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
    }

    .customer-table th:last-child {
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    }

.customer-tooltip-container {
    cursor: pointer;
}


    .customer-tooltip-container .customer-tooltip-text {
        position: absolute;
        font-size: 0.89rem;
        right: 0;
        background-color: rgba(0, 0, 0, 0.80);
        color: #fff;
        padding: 6px 8px;
        border-radius: 4px;
        visibility: hidden;
        opacity: 0;
        width: 250px;
        transition: opacity 0.3s ease;
        z-index: 10000;
    }

.pagination-container {
    display: flex;
    align-items: center;
    margin: 1rem 0;
    justify-content: flex-end;
    font-size: 0.89rem;
}


/* Show the tooltip text on hover */
.customer-tooltip-container:hover .customer-tooltip-text {
    visibility: visible;
    opacity: 1;
}

#firstBuyerChart {
    width: 100%;
    height: 260px; /* or any desired height */
}


.sort-arrow,
.sort-arrow-placeholder {
    display: inline-block;
    width: 1em; /* same width for arrow or placeholder */
    text-align: center;
    margin-left: 5px; /* small gap from the header text */
    cursor: pointer;
}
/* AiChat.razor.css */

@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap');


.ai-chat-page-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-color: transparent;
    color: var(--chat-text-primary-on-dark);
    font-family: var(--font-family);
    box-sizing: border-box;
}

.ai-chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 20px);
    max-height: 750px;
    width: 100%;
    max-width: 1000px;
    background-color: transparent;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0,0,0,0.05);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.chat-history {
    flex-grow: 1;
    padding: 25px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

    .chat-history::-webkit-scrollbar {
        width: 8px;
    }

    .chat-history::-webkit-scrollbar-track {
        background: transparent;
    }

    .chat-history::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.2);
        border-radius: 4px;
    }

.welcome-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--chat-text-secondary-on-dark);
    flex-grow: 1;
    padding: 30px;
}

    .welcome-message h1 {
        font-size: 2.2em;
        font-weight: 500;
        color: var(--chat-text-primary-on-dark);
        margin-bottom: 12px;
    }

    .welcome-message p {
        font-size: 1.1em;
        max-width: 400px;
    }

.chat-message {
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

.user-message {
    align-items: flex-end;
}

.ai-message {
    align-items: flex-start;
}

.message-bubble {
    padding: 10px 15px;
    border-radius: 18px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid var(--chat-border-color);
}

.user-bubble {
    background-color: var(--user-bubble-bg);
    color: var(--chat-text-primary-on-light);
    border-bottom-right-radius: 6px;
    margin-left: auto;
    max-width: 75%;
}

.ai-bubble {
    background-color: var(--ai-bubble-bg);
    color: var(--chat-text-primary-on-light);
    border-bottom-left-radius: 6px;
}

.ai-error-bubble {
    background-color: var(--ai-error-bubble-bg);
    color: var(--error-text-on-light);
    border: 1px solid var(--error-border-on-light);
    border-bottom-left-radius: 6px;
}


.ai-message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 24px;
}

.futuristic-icon {
    display: inline-block;
    color: var(--futuristic-icon-color-on-light);
}

    .futuristic-icon.error-state {
        color: var(--futuristic-icon-error-color);
    }

    .futuristic-icon svg {
        display: block;
        width: 100%;
        height: 100%;
    }

.ai-message-icon-size {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.rotating-icon {
    /* SVG internal animation is used */
}

.copy-button {
    background-color: var(--copy-button-bg-normal); /* Black background */
    border: 1px solid var(--copy-button-bg-normal); /* Border same as bg */
    color: var(--copy-button-text-normal); /* White text */
    padding: 4px 8px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    margin-left: auto;
}


.copy-icon { /* SVG inherits color from parent's 'color' property */
    width: 14px;
    height: 14px;
}

.message-content {
    flex-grow: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    font-size: var(--message-font-size);
    color: var(--chat-text-primary-on-light);
    overflow-x: auto;
}

.ai-error-bubble .message-content {
    color: var(--error-text-on-light);
}

.message-content > *:first-child {
    margin-top: 0;
}

.message-content > *:last-child {
    margin-bottom: 0;
}

.message-content table {
    border-collapse: collapse;
    width: auto;
    margin: 10px 0;
    font-size: 0.85rem;
    border: 1px solid var(--table-border-color);
}

.message-content th,
.message-content td {
    border: 1px solid var(--table-border-color);
    padding: 6px 10px;
    text-align: left;
    white-space: nowrap;
}

.message-content th {
    background-color: rgba(0,0,0,0.03);
    font-weight: 500;
}

.message-content pre {
    background-color: rgba(0,0,0,0.03);
    padding: 10px;
    border-radius: 4px;
    border: 1px solid var(--table-border-color);
    overflow-x: auto;
    white-space: pre;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 0.8rem;
    margin: 10px 0;
}

.message-content code {
    background-color: rgba(0,0,0,0.03);
    padding: 1px 4px;
    border-radius: 3px;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 0.85em;
}

.generic-error-message {
    color: var(--error-text-on-light);
    font-style: italic;
}

.chat-input-area-wrapper {
    padding: 15px 25px;
    background-color: transparent;
    border-top: 1px solid var(--chat-border-color);
}

.chat-input-area {
    background-color: var(--chat-input-bg-semi);
    border-radius: 28px;
    padding: 6px 8px 6px 20px;
    display: flex;
    align-items: flex-end;
    position: relative;
    border: 1px solid rgba(255,255,255,0.1);
}

#user-question-input-blazor {
    flex-grow: 1;
    border: none;
    outline: none;
    background-color: transparent;
    color: var(--chat-text-primary-on-dark);
    font-family: inherit;
    font-size: 1rem;
    padding: 10px 5px;
    resize: none;
    overflow-y: hidden;
    min-height: 24px;
    line-height: 1.5;
}

    #user-question-input-blazor::placeholder {
        color: var(--chat-text-secondary-on-dark);
        opacity: 0.8;
    }

.send-button {
    background-color: transparent;
    color: var(--action-color);
    border: none;
    border-radius: 50%;
    padding: 8px;
    margin-left: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
    align-self: flex-end;
    margin-bottom: 2px;
}

    .send-button:hover:not(:disabled) {
        background-color: rgba(26, 115, 232, 0.1);
    }

    .send-button:disabled {
        color: #9e9e9e;
        cursor: not-allowed;
    }

    .send-button svg {
        width: 24px;
        height: 24px;
    }

.typing-indicator {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

    .typing-indicator span {
        height: 9px;
        width: 9px;
        background-color: var(--chat-text-secondary-on-light);
        border-radius: 50%;
        display: inline-block;
        margin: 0 3px;
        animation: bounceTyping 1.4s infinite ease-in-out both;
    }

        .typing-indicator span:nth-child(1) {
            animation-delay: -0.32s;
        }

        .typing-indicator span:nth-child(2) {
            animation-delay: -0.16s;
        }

@keyframes bounceTyping {
    0%, 80%, 100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1.0);
    }
}

.client-error-message {
    font-size: 0.85rem;
    color: #d93025;
    padding: 8px 25px 0px;
    text-align: left;
}

@media (max-width: 768px) {
    .ai-chat-page-container {
        padding: 20px 10px;
    }

    .ai-chat-container {
        height: calc(100vh - 40px);
        border-radius: 12px;
    }

    .chat-history {
        padding: 20px 15px;
        gap: 15px;
    }

    .welcome-message h1 {
        font-size: 1.8em;
    }

    .welcome-message p {
        font-size: 1em;
    }

    .message-bubble {
        padding: 8px 12px;
    }

    .user-bubble {
        max-width: 85%;
    }

    .chat-input-area-wrapper {
        padding: 10px 15px;
    }

    .chat-input-area {
        padding: 4px 6px 4px 15px;
    }

    #user-question-input-blazor {
        font-size: 0.95rem;
    }

    .ai-message-icon-size {
        width: 22px;
        height: 22px;
    }

    .copy-button {
        font-size: 0.7rem;
        padding: 3px 6px;
    }

    .copy-icon {
        width: 12px;
        height: 12px;
    }

    .message-content table {
        font-size: 0.75rem;
    }

    .message-content th, .message-content td {
        padding: 4px 6px;
    }

    .message-content pre {
        font-size: 0.7rem;
        padding: 8px;
    }
}

@media (max-width: 480px) {
    .message-bubble {
        gap: 6px;
    }

    .welcome-message h1 {
        font-size: 1.6em;
    }

    .ai-message-icon-size {
        width: 20px;
        height: 20px;
    }
}





/*AI page */
.ask-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: left;
    width: 100%;
    margin-top: 2rem;
    max-width: 1000px;
    padding: 20px;
    height: 100%;
    background-color: #1e1e1e;
    border-radius: 12px;
    overflow: hidden;
}

.conversation-container {
    width: 100%;
    max-width: 800px;
    margin-bottom: 20px;
    overflow-y: auto;
    max-height: calc(100vh - 200px); /* Ensure space for input */
}

.question-box {
    background: #88888836;
    color: white;
    padding: 15px;
    margin-bottom: -15px;
    border-radius: 10px;
    word-wrap: break-word;
    font-size: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.response-container {
    width: 100%;
    max-width: 800px;
    overflow-y: auto;
    position: relative;
    border-radius: 10px;
    margin-bottom: 10px;
}

.response-box {
    color: #f1f1f1;
    padding: 15px;
    padding-top: 15px;
    margin: 30px 0;
    border-radius: 10px;
    white-space: normal; /* Ensures proper text wrapping */
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: 14.5px;
}

.info-ai {
    background-color: #45454500;
    color: #8b8b8b;
    padding: 10px 15px;
    /* border-left: 5px solid #ffffff; */
    font-size: 12px;
    font-weight: 600;
    border-radius: 5px;
    margin-top: 10px;
}


.response-box h1 {
    font-size: 1.1rem;
    font-weight: bold;
    color: #ffffff;
    margin-top: 15px;
    margin-bottom: 10px;
}

.response-box h2 {
    font-size: 1.09rem;
    font-weight: bold;
    color: #ffffff;
    margin-top: 15px;
    margin-bottom: 10px;
}
/* Ensure headings appear larger */
.response-box h3 {
    font-size: 1.09rem;
    font-weight: bold;
    color: #ffffff;
    margin-top: 15px;
    margin-bottom: 10px;
}

.response-box h4 {
    font-size: 1.01rem;
    font-weight: bold;
    color: #ffffff;
    margin-top: 15px;
    margin-bottom: 10px;
}
/* Ensure strong text is visible */
.response-box strong {
    font-weight: 600;
    font-size: 0.99rem;
}

/* Improve bullet point readability */
.response-box ul {
    padding-left: 25px;
    margin-top: 5px;
}

.response-box li,
.response-box p {
    margin-bottom: 5px;
    font-size: 0.90rem;
}


@keyframes pulsate {
    0% {
        opacity: 0.2;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }

    100% {
        opacity: 0.2;
        transform: scale(0.9);
    }
}

.loading-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border-radius: 50%;
    animation: pulsate 1s infinite;
}

.input-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background: #222;
    border-radius: 25px;
    width: 100%;
    max-width: 825px;
    position: relative;
    padding: 12px;
}

    .input-container textarea {
        width: 100%;
        padding: 30px;
        border: none;
        border-radius: 25px;
        background: #333;
        color: white;
        outline: none;
        font-size: 16px;
        min-height: 50px;
        max-height: 250px;
        resize: none;
        transition: height 0.3s ease;
        overflow-y: auto;
    }

    .input-container button {
        border: none;
        color: black;
        font-size: 16px;
        cursor: pointer;
        position: absolute;
        bottom: 15px;
        right: 15px;
        padding: 10px 15px;
        border-radius: 50%;
        transition: transform 0.3s ease-in-out;
    }

        .input-container button:hover {
            transform: scale(1.2);
        }

    /* Custom Scrollbar for the textarea */
    .input-container textarea {
        scrollbar-width: thin; /* Firefox */
        scrollbar-color: #888 #333; /* Firefox */
    }

        /* Webkit scrollbar for browsers like Chrome and Safari */
        .input-container textarea::-webkit-scrollbar {
            width: 8px; /* Width of the scrollbar */
        }

        .input-container textarea::-webkit-scrollbar-thumb {
            background-color: #888; /* Color of the thumb */
            border-radius: 10px;
        }

            .input-container textarea::-webkit-scrollbar-thumb:hover {
                background-color: #555; /* Darker color when hovered */
            }

        .input-container textarea::-webkit-scrollbar-track {
            background-color: #333; /* Background of the track */
            border-radius: 10px;
        }

/* Custom Scrollbar for the conversation container */
.conversation-container {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #888 #333; /* Firefox */
}

    /* Webkit scrollbar for browsers like Chrome and Safari */
    .conversation-container::-webkit-scrollbar {
        width: 8px; /* Width of the scrollbar */
    }

    .conversation-container::-webkit-scrollbar-thumb {
        background-color: #888; /* Color of the thumb */
        border-radius: 10px;
    }

        .conversation-container::-webkit-scrollbar-thumb:hover {
            background-color: #555; /* Darker color when hovered */
        }

    .conversation-container::-webkit-scrollbar-track {
        background-color: #333; /* Background of the track */
        border-radius: 10px;
    }


@media (max-width: 768px) {
    .ask-container {
        margin-top: 6rem;
        max-width: 100%;
        padding: 2px;
    }

    .input-container {
        width: 100%;
    }

        .input-container textarea {
            width: 100%;
        }

    .conversation-container {
        max-width: 100%;
    }

    .custom-empty-layout {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        background-color: #1d1e1e;
        font-family: Arial, sans-serif;
        color: black;
        overflow-y: auto;
        height: calc(100vh - 3.5rem);
        padding: 0;
    }

    .layout-container {
        display: flex;
        width: 100%;
        height: 100vh;
        overflow: auto;
    }

    .customer-table-container {
        display: none;
    }
}

/* Container for the entire layout */
.layout-container {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Main content to the right of the sidebar */
.custom-empty-layout {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-color: #1d1e1e;
    font-family: Arial, sans-serif;
    color: white;
    height: 100vh;
    padding: 0 20px;
}

/*AI NavBar*/

.ai-navbar {
    /* Float the navbar so it doesn't affect the layout below */
    position: fixed;
    top: 0;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Basic styling */
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    z-index: 9999; /* ensures it's on top of other elements */
    width: auto;
    min-width: 250px;
    max-width: 90vw
}

.ai-navbar-left,
.ai-navbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* spacing between items */
}

/* The user icon button */
.user-icon-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

/* The user dropdown menu (hidden by default) */
.ai-navbar-user-dropdown {
    position: absolute;
    top: 120%;
    right: 0;
    background: #2a2a2a;
    border: 1px solid #3c3c3c;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    padding: 1rem;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.1s ease, transform 0.1s ease, visibility 0.1s;
}

    .ai-navbar-user-dropdown.show {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

/* Dropdown container */
.custom-dropdown {
    position: relative;
    display: inline-block;
    width: 180px;
    font-family: Arial, sans-serif;
}

/* Selected option */
.dropdown-selected {
    color: white;
    padding: 10px 15px;
    border-radius: 6px;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s ease;
}

    .dropdown-selected:hover {
        background-color: #3a3a3a;
    }

/* Dropdown options (hidden by default) */
.dropdown-options {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background: #2a2a2a;
    border: 1px solid #3c3c3c;
    border-radius: 6px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    display: none;
    flex-direction: column;
    z-index: 1000;
    font-size: 0.9rem;
}

/* Individual option */
.dropdown-option {
    padding: 10px 15px;
    color: white;
    cursor: pointer;
    transition: background 0.2s ease;
}

    .dropdown-option:hover {
        background: #3a3a3a;
    }

/* Show dropdown when active */
.custom-dropdown.active .dropdown-options {
    display: flex;
}




.user-email-ai {
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    padding: 1rem;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 1rem;
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, background 0.4s ease;
}

/* Show the dropdown when toggled */
.ai-navbar-user-dropdown.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.model-info {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 4px;
    padding: 6px;
    user-select: none; /* Prevents selection */
    cursor: default; /* Makes it non-clickable */
}
/* The user email text in the dropdown */
.user-email-ai {
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    padding: 1rem;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 1rem;
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, background 0.4s ease;
}


.user-email-ai {
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    padding: 1rem;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 1rem;
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, background 0.4s ease;
}



/* Style for the user's email text inside the dropdown */
.user-email-ai {
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    padding: 1rem;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 1rem;
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, background 0.4s ease;
}

/*AI Buttons*/
.suggestion-buttons {
    display: flex;
    gap: 0.75rem; /* Space between each button */
    margin-top: 1rem; /* Space above the button row */
}

    .suggestion-buttons button {
        color: #c1bebe;
        border: none;
        border-radius: 1rem;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

        .suggestion-buttons button:hover {
            background-color: #3c3c3c99; /* Darker indigo on hover */
            color: #ffffff; /* Brighter text color on hover */
        }

        .suggestion-buttons button:focus {
            outline: none; /* Remove outline */
            box-shadow: 0 0 0 2px rgba(79,70,229,0.4); /* Subtle focus ring */
        }

/*/SubMenu*/

.submenu-container {
    margin-top: 1rem;
    background-color: #1f1f1f;
    padding: 1rem;
    display: flex;
    border-radius: 0.5rem;
}

    .submenu-container h4 {
        color: #e4e4e4ce;
        font-size: 1.05rem;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .submenu-container button {
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
        margin-left: 0.5rem;
        color: #fff;
        font-size: 14px;
        border: none;
        padding: 0.5rem 0.6rem;
        border-radius: 0.5rem;
        cursor: pointer;
        transition: background-color 0.2s;
    }

        .submenu-container button:hover {
            background-color: #3f3f3f;
        }
/* Hide entire navbar on small screens */
@media (max-width: 768px) {
    .ai-navbar {
        display: none;
    }

    .submenu-container {
        margin-top: 1rem;
        background-color: #1f1f1f;
        padding: 1rem;
        display: block;
        border-radius: 0.5rem;
    }
}

/*AI MODAL*/
.aimodal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    z-index: 1000;
}

.aimodal-content {
    position: absolute;
    width: 100%;
    max-width: 400px;
    background: #181818;
    padding: 20px;
    height: 100vh;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}


/* Slide-down animation */
.slide-down {
    animation: slideDown 0.5s ease-out forwards;
}

@keyframes slideDown {
    from {
        transform: translateX(0%) translateY(-100px);
        opacity: 0;
    }

    to {
        transform: translateX(0%) translateY(0);
        opacity: 1;
    }
}
/* Style for the AI modal button */
.custom-ai-modal-btn {
    position: relative;
    background: #f2f2f200;
    border: none;
    padding: 5px 5px;
    margin-top: 10px;
    color: #ffffff;
    border-bottom: 2px solid #ffffff73;
    cursor: pointer;
    font-size: 14px;
    border-radius: 12px;
}

.copy-button {
    background-color: #7979792e;
    color: white;
    border: none;
    padding: 3px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 5px;
    transition: background-color 0.3s ease-in-out;
}

    .copy-button:hover {
        background-color: #3f3f3f;
    }

    .copy-button svg {
        width: 16px;
        height: 16px;
        stroke: white; /* Icon color */
    }

.floating-copy {
    position: absolute;
    top: 20px; /* Default position */
    right: 10px; /* Align to the right */
    background-color: #7979792e;
    padding: 3px;
    font-size: 12px;
    border-radius: 5px;
    transition: transform 0.2s ease-in-out, opacity 0.2s;
    opacity: 0.8; /* Initially hidden */
}

.response-container:hover .floating-copy {
    opacity: 1; /* Show button when hovered */
}



.close-aimodal {
    cursor: pointer;
    position: absolute;
    color: #d9d9d9;
    border-radius: 10px;
    padding: 10px;
    transition: background-color 0.3s ease, color 0.3s ease;
    right: 20px;
    top: 10px;
}

    .close-aimodal:hover {
        background-color: #3c3c3c99;
        color: white;
    }

.aimodal-footer {
    margin-top: 20px;
}

.custom-ai-modal-btn:hover {
    background-color: #3c3c3c99;
}

.my-card {
    background: linear-gradient(173deg, #ffffff 0%, #ffffff 100%);
    border-radius: 12px;
    padding: 1.5rem;
    color: #040404;
    font-weight: 600;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); */
    /* margin-bottom: 1.5rem; */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgb(146 146 146 / 35%);
    position: relative;
    overflow: hidden;
}

    .my-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);
    }

    /* Optional "highlight swirl" effect on hover via a pseudo-element */
    .my-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(183deg, rgb(255 0 150 / 8%), rgb(0 216 253 / 5%));
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .my-card:hover::before {
        opacity: 1;
    }

    .my-card small {
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        color: #000000;
        margin-bottom: 0.5rem;
        margin-top: 0.8rem;
    }

.card-info-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 13px;
    padding-top: 20px;
}

/* Brand tags container */
.brands-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 100%; /* Ensures the container doesn't grow too wide */
    overflow-wrap: break-word; /* Helps wrap long words */
}

    .brands-wrap > div {
        color: #3f3a3a;
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 0.8rem;
        /* transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; */
        cursor: default;
        background: linear-gradient(135deg, #ffe1e5, white);
        position: relative;
        /* box-shadow: 0 0 8px rgb(255 0 150 / 9%); */
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

        .brands-wrap > div:hover {
            transform: translateY(-2px);
        }


/* Chart Container */
.single-customer-chart-container {
    background: #fefefe;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    color: #333;
    min-height: 340px; /* Minimum height */
    height: auto; /* Let it expand as needed */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden; /* Retain this if needed for the pseudo-element overlay */
}


    /* Lift effect on hover (optional) */
    .single-customer-chart-container:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 12px rgba(0,0,0,0.3);
    }


        .single-customer-chart-container:hover::before {
            opacity: 1;
        }

    .single-customer-chart-container canvas {
        max-height: 300px; /* or a fixed height that suits your design */
        width: 100%;
    }

.icon-button {
    position: fixed;
    cursor: pointer;
    top: 5.9rem;
    width: 40px;
    margin-left: 2rem;
    height: 40px;
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

    .icon-button:hover {
        background-color: #e0e0e0;
        transform: scale(1.1);
    }

.centered-message {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #000000;
    background-color: #efefef;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgb(0 0 0 / 32%);
    margin: auto;
}


/* Optional: Add vertical dividers between sections on medium+ screens */
@media (min-width: 768px) {
    .my-card .col-md-3:not(:last-child) {
        border-right: 2px solid rgb(167 158 158 / 67%);
        padding-right: 1rem;
    }
}

@media (max-width: 768px) {
    /* Override the inline height for mobile view */
    .col-12.col-lg-3 .my-card {
        height: auto !important;
    }

    .card-info-text {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        font-size: 13px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .my-card {
        margin-top: 1.5rem;
    }

    .pagination-container {
        display: none;
        gap: 0.5rem;
        display: none;
        align-items: center;
        margin-top: 1rem;
    }
}

/* Order History Button Container */
.orders-btn-container {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
    overflow: visible; /* Replicates the inline style */
}

/* Order History Buttons */
.orders-year-btn {
    display: inline-block;
    color: black;
    padding: 4px 8px;
    font-size: 12.2px;
    border: none;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
    transition: background-color 0.2s, color 0.2s;
}

    .orders-year-btn:hover {
        background-color: rgb(245, 245, 245);
    }

    .orders-year-btn.active {
        background-color: #4c91c7;
        color: #fff;
        border: 1px solid #f3f3f3;
    }


.loader-container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align items from the top */
    padding-top: 2rem; /* Add the 2rem space from the top */
    padding-bottom: 2rem;
}


.loader {
    width: 20px;
    aspect-ratio: 1;
    display: grid;
    border-radius: 50%;
    background: linear-gradient(0deg,rgb(0 0 0/50%) 30%,#0000 0 70%,rgb(0 0 0/100%) 0) 50%/8% 100%, linear-gradient(90deg,rgb(0 0 0/25%) 30%,#0000 0 70%,rgb(0 0 0/75% ) 0) 50%/100% 8%;
    background-repeat: no-repeat;
    animation: l23 1s infinite steps(12);
}

    .loader::before,
    .loader::after {
        content: "";
        grid-area: 1/1;
        border-radius: 50%;
        background: inherit;
        opacity: 0.915;
        transform: rotate(30deg);
    }

    .loader::after {
        opacity: 0.83;
        transform: rotate(60deg);
    }

@keyframes l23 {
    100% {
        transform: rotate(1turn)
    }
}

.icon-label {
    display: flex;
    align-items: center;
    gap: 7px; /* or whatever spacing you want */
}

.error-message {
    color: #ff4d4d;
    margin-top: 1.5rem;
    font-weight: 600;
    font-size: 0.85rem;
    background-color: rgba(255, 77, 77, 0.1);
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border-left: 4px solid #ff4d4d;
    display: inline-block;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

.flex-cell-content {
    display: flex;
    flex-direction: column; /* Stack vertically instead of horizontally */
    align-items: center; /* Center align both number and percentage */
    gap: 0.1rem; /* Small gap between number and percentage */
    width: 100%;
    white-space: nowrap;
    line-height: 1.2; /* Tighter line height for compact display */
}


.retention-line {
    margin: 0.25em 0 1em; /* small top/bottom margins */
}

.retention-details {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25em;
    margin-left: 0.5em; /* space between number and % */
    font-size: 1em;
    font-weight: bold;
}

    .retention-details .percentage {
        color: #3498DB;
        line-height: 1;
    }

    .retention-details .suffix {
        color: grey;
        font-weight: normal;
        font-size: 0.8em;
        line-height: 1;
    }

/* make % and suffix uniform across all cards */
.customer-info-card .percentage,
.customer-info-card .suffix {
    font-size: 0.8em; /* choose whatever size you want */
    line-height: 1; /* keep them vertically aligned */
}

.customer-info-card .percentage {
    font-weight: bold; /* if you want the % bold */
    color: #3498DB; /* or inherit your up/down colors */
}

/* if you have up/down classes */
.customer-info-card .percentage-up {
    color: #28a745;
}

.customer-info-card .percentage-down {
    color: #dc3545;
}

.customer-info-card .suffix {
    font-weight: normal; /* e.g. "vs. …" in normal weight */
    color: grey; /* or your brand's muted color */
}


    .customer-info-card .suffix:empty::after {
        content: ""; /* no visible text */
        display: block; /* its own line */
        height: 2.2em; /* match your normal line-height */
    }

.loading-container {
    display: inline-flex; /* shrink to contents */
    align-items: center;
    justify-content: center;
    /* no extra padding needed unless you want it */
    background: transparent;
}

.searching-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #333; /* your base text color */
    text-transform: uppercase;
    position: relative;
}

    /* the animated dots */
    .searching-text::after {
        content: '';
        display: inline-block;
        width: 1em; /* reserve space for up to 3 dots */
        text-align: left;
        animation: dots 1.5s steps(4, end) infinite;
    }

@keyframes dots {
    0% {
        content: '';
    }

    25% {
        content: '.';
    }

    50% {
        content: '..';
    }

    75% {
        content: '...';
    }

    100% {
        content: '';
    }
}

.results-summary {
    padding-left: 10px;
    margin-top: -1rem;
    padding-bottom: 10px;
    font-size: 0.9rem;
    color: #5f6368;
}

.results-count {
    font-weight: 500;
}


.pagination-button {
    width: 32px;
    height: 32px;
    padding: 0;
    background: white;
    border: 1px solid #dfe1e5;
    border-radius: 4px;
    font-size: 1.1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

    .pagination-button:hover:not(:disabled) {
        background-color: #f1f3f4;
        border-color: #c1c1c1;
    }

    .pagination-button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.pagination-counter {
    font-size: 0.9rem;
    color: #5f6368;
    min-width: 3ch; /* keeps the width consistent even on single digits */
    text-align: center;
}



.brand-filter-warning {
    display: flex; /* To align icon and text */
    align-items: flex-start; /* Align icon to the top of the text */
    background-color: #fffbe6; /* Light yellow - common for warnings */
    color: #997400; /* Darker yellow/brown for text - good contrast */
    border: 1px solid #ffe58f; /* Border color to complement background */
    border-radius: 4px; /* Slightly rounded corners */
    padding: 12px 15px; /* Padding around the text */
    font-size: 0.9em; /* Slightly smaller font size for a notice */
    line-height: 1.4; /* Improve readability */
    margin-bottom: 10px; /* Space below the warning if it's not the last child or if not using gap */
}

    .brand-filter-warning svg {
        margin-right: 10px; /* Space between icon and text */
        min-width: 16px; /* Ensure icon doesn't shrink too much */
        height: 16px; /* Match icon size */
        margin-top: 2px; /* Fine-tune vertical alignment with the first line of text */
    }

    .brand-filter-warning div {
        flex-grow: 1; /* Text takes remaining space */
    }


.subtitle {
    font-size: 0.9rem;
    color: #444; /* darker gray for better readability */
}

.badge {
    display: inline-block;
    background: #f2f2f2; /* very light gray */
    color: #333; /* dark enough to read easily */
    padding: 0.4em 0.8em;
    border-radius: 1em;
    font-weight: bold;
    margin-right: 0.5em;
    border: 1px solid #d1d1d1; /* subtle border to define shape */
}

.has-tooltip {
    position: relative;
    cursor: help;
}

    .has-tooltip::after {
        content: "\2139";
        font-size: 0.9em;
        vertical-align: middle;
        margin-left: 0.2em;
        cursor: help;
    }

/* Classification Badges */
.classification-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    font-size: 0.70rem;
    font-weight: 600;
    letter-spacing: 0.025em;
}

.classification-c1 {
    background: #c6f6d5;
    color: #22543d;
}

.classification-c2 {
    background: #bee3f8;
    color: #2a4365;
}

.classification-c3 {
    background: #faf089;
    color: #744210;
}

.classification-c4 {
    background: #fed7d7;
    color: #742a2a;
}

.classification-c5 {
    background: #e9d8fd;
    color: #44337a;
}

.classification-churned {
    background: #feb2b2;
    color: #9b2c2c;
}


/* Level badges styling */
.level-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.70rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.level-diamond {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    color: #4338ca;
    border: 1px solid #c7d2fe;
}

.level-gold {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #d97706;
    border: 1px solid #fde68a;
}

.level-silver {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

.level-bronze {
    background: linear-gradient(135deg, #fed7aa, #fdba74);
    color: #ea580c;
    border: 1px solid #fdba74;
}

/* Journey Dashboard */
.journey-dashboard {
    padding: 20px;
    max-width: 95%;
    margin: 0 auto;
    background: #f8fafc;
    min-height: 100vh;
    border-radius: 15px;
}

/* Headers & Titles */
.dashboard-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 40px 48px;
    background: linear-gradient(180deg, #1a1a1a 0%, #000000 50%, #000000b8 100%);
    border-radius: 16px;
    color: #ffffff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

    .dashboard-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: -30%;
        width: 30%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.3) 35%, rgba(255, 255, 255, 0.2) 50%, transparent);
        border-radius: inherit;
    }

    .dashboard-header::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(96, 165, 250, 0.15) 0%, transparent 50%);
        pointer-events: none;
        border-radius: inherit;
        animation: headerGlow 4s ease-in-out infinite alternate;
    }

.dashboard-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 16px 0;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
    color: #ffffff;
}

.title-icon {
    color: #60a5fa;
    filter: drop-shadow(0 2px 8px rgba(96, 165, 250, 0.4));
    animation: iconGlow 3s ease-in-out infinite alternate;
    width: 25px;
    height: 25px;
}

.dashboard-subtitle {
    font-size: 1.125rem;
    opacity: 0.85;
    margin: 0;
    font-weight: 400;
    position: relative;
    z-index: 1;
    color: #ffffff;
    letter-spacing: 0.01em;
}

.chart-header h3,
.table-header h3 {
    margin: 0;
    font-size: 1.3rem; /* Adjusted chart header for consistency */
    font-weight: 700;
    color: #374151;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    line-height: 1.2;
}

/* Table header styling - matching SalesAnalytics */
.table-header {
    padding: 10px;
    background: linear-gradient(135deg, #f9fafb, #ffffff);
    border-bottom: 1px solid var(--lv-border-primary, #e5e7eb);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    margin-bottom: 1rem;
}

.title-block {
    display: flex;
    align-items: center;
    gap: calc(var(--lv-spacing-unit, 8px) * 1);
}

.title-block .badge {
    font-size: var(--lv-font-size-small, 12px);
    color: var(--lv-text-secondary, #6b7280);
    background: var(--lv-background-secondary, #f8fafc);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 500;
}

.table-controls {
    display: flex;
    align-items: center;
    gap: calc(var(--lv-spacing-unit, 8px) * 1.5);
    flex-wrap: wrap;
}

/* Desktop table header styles */
@media (min-width: 768px) {
    .table-header {
        padding: calc(var(--lv-spacing-unit, 8px) * 2);
        flex-direction: row;
        justify-content: space-between;
        gap: 0;
    }

    .table-header h3 {
        font-size: var(--lv-font-size-large, 16px);
    }
}

@media (max-width: 768px) {
    .journey-dashboard {
        padding: 10px;
    }

    .dashboard-header {
        margin-bottom: 30px;
        padding: 32px 24px;
        border-radius: 12px;
    }

    .dashboard-title {
        font-size: 2rem;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 20px;
    }

    .title-icon {
        width: 32px;
        height: 32px;
    }

    .dashboard-subtitle {
        font-size: 1rem;
    }

    .filters-section {
        padding: 15px 10px;
        margin-bottom: 20px;
    }

    .filters-left {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .filter-group {
        width: 100% !important;
        margin-right: 0 !important;
        box-sizing: border-box;
        position: relative;
        z-index: 1;
    }

        .filter-group:has(.select-options) {
            z-index: 1000;
        }

    .custom-select {
        width: 100% !important;
        min-width: unset !important;
        max-width: unset !important;
        box-sizing: border-box;
        position: relative;
    }

    .select-trigger {
        width: 100% !important;
        box-sizing: border-box;
    }

    .select-options {
        z-index: 1001;
    }

    .filter-group:has([for="goalFilter"]) .custom-select,
    .filter-group:has([for="journeyFilter"]) .custom-select {
        width: 100% !important;
        min-width: unset !important;
        max-width: unset !important;
        box-sizing: border-box;
        z-index: 1000;
    }

    .filter-group:has([for="goalFilter"]) .select-trigger,
    .filter-group:has([for="journeyFilter"]) .select-trigger {
        width: 100% !important;
        min-width: unset !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
    }

    .kpi-section {
        grid-template-columns: 1fr;
    }

    .kpi-card {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .kpi-side-by-side {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .chart-wrapper {
        height: 300px;
        padding: 15px;
    }

    .half-width .chart-wrapper {
        height: 280px;
    }

    .table-controls {
        flex-direction: column;
        width: 100%;
        gap: 0.75rem;
    }

    .table-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .search-input {
        min-width: auto;
        width: 100%;
    }

    .chart-controls {
        width: 100%;
        justify-content: center;
    }

    .table-footer,
    .modal-footer,
    .stages-footer {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        text-align: center;
    }

    .pagination-controls {
        justify-content: center;
        flex-wrap: wrap;
    }

    .pagination-btn {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

        .pagination-btn.page-number {
            min-width: 10px;
            padding: 0 8px;
        }

    .chart-filter-dropdown .custom-select {
        min-width: 100px;
        max-width: 150px;
        z-index: 1000;
    }

    .chart-filter-dropdown .select-options {
        z-index: 1001;
    }

    .filter-checkbox-option {
        padding: 10px 12px;
    }

    .checkbox-label {
        font-size: 12px;
    }

    .chart-header-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .view-toggle-buttons {
        justify-content: center;
        align-self: center;
        width: fit-content;
    }

    .comparison-table-wrapper {
        padding: 16px;
        height: 300px;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 10px 12px;
        font-size: 12px;
    }

    .journey-name-cell {
        max-width: 120px;
        font-size: 12px;
    }

    .stage-journey-col {
        width: 25%;
    }

    .stage-name-col {
        width: 30%;
    }

    .stage-contacts-col {
        width: 15%;
    }

    .stage-goal-col {
        width: 15%;
    }

    .stage-revenue-col {
        width: 15%;
    }

    .stage-progress-col {
        width: 10%;
    }

    .journey-name {
        font-size: 0.8rem;
    }

    .stage-description {
        display: none;
    }

    .kpi-submetric {
        margin-top: 6px;
        padding-top: 6px;
    }

    .submetric-value {
        font-size: 0.85rem;
    }

    .submetric-rate {
        font-size: 0.8rem;
    }

    .stages-modal-content {
        width: 98vw;
        height: 95vh;
        border-radius: 12px;
    }

    .stages-modal-header {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .stages-modal-title {
        font-size: 1.4rem;
        gap: 12px;
    }

    .stages-modal-subtitle {
        font-size: 0.9rem;
    }

    .stages-modal-close {
        position: absolute;
        top: 16px;
        right: 16px;
        padding: 8px;
        color: #000000;
    }

    .stages-table-container {
        padding: 20px 16px;
    }

    .stages-summary {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 24px;
    }

    .summary-card h4 {
        font-size: 0.8rem;
        margin-bottom: 8px;
    }

    .summary-value {
        font-size: 1.4rem;
    }

    .stage-name {
        font-size: 0.9rem;
    }

    .count-number {
        font-size: 1rem;
    }

    .count-percentage {
        font-size: 0.7rem;
    }

    .revenue-amount {
        font-size: 1rem;
        color: black
    }

    .progress-circle {
        width: 32px;
        height: 32px;
        font-size: 0.65rem;
    }

    .kpi-equal-value {
        text-align: center;
    }

    .kpi-value-equal {
        font-size: 1.4rem;
    }

    .kpi-label-equal {
        font-size: 0.75rem;
    }

    .kpi-secondary-metric {
        margin-top: 8px;
        padding-top: 8px;
    }

    .kpi-value-secondary {
        font-size: 1.2rem;
    }

    .kpi-label-secondary {
        font-size: 0.75rem;
    }
}

@media (max-width: 634px) {
    .stages-modal-overlay,
    .modal-overlay {
        left: 0 !important;
        padding: 0 !important;
    }

    .revenue-amount[b-h15aahk23u] { /* This specific selector seems to be from a scoped CSS, handle carefully if you have a build step */
        font-size: 0.78rem;
    }

    .stages-modal-content,
    .modal-content {
        width: 100vw !important;
        height: 100vh !important; /* Full height for stages modal */
        max-width: none !important;
        max-height: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    .modal-content {
        height: calc(100vh - 5rem) !important; /* Adjusted for regular modal */
        margin-top: 5rem !important; /* Adjusted for regular modal */
    }

    .stages-modal-content {
        margin-top: 10rem 160px !important; /* Original, may need review */
    }

    .stages-modal-header,
    .modal-header {
        padding: 16px 12px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        position: relative !important;
        min-height: auto !important;
    }

    .modal-header {
        margin: 0; /* Remove extra margin */
    }

        .stages-modal-title,
        .modal-header h3 {
            font-size: 1.2rem !important;
            gap: 8px !important; /* Stages specific */
            margin: 0 !important;
        }

        .modal-header h3 {
            padding-right: 40px !important;
        }

    .stages-modal-subtitle,
    .modal-subtitle {
        font-size: 0.8rem !important;
        margin: 0 !important;
    }

    .stages-modal-close,
    .modal-close {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        padding: 4px !important;
        width: 28px !important;
        height: 28px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .stages-table-container,
    .modal-body { /* Both body and container for stages */
        padding: 12px 8px !important;
        height: calc(100vh - 150px) !important; /* Stages specific */
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .modal-body {
        padding: 0 !important; /* Override for regular modal */
        overflow: hidden !important; /* Override for regular modal */
    }

    .stages-summary {
        flex-direction: row !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
        flex-shrink: 0 !important;
    }

    .summary-card {
        padding: 12px 8px !important;
        text-align: center !important;
        flex: 1 !important;
        min-height: auto !important;
    }

        .summary-card h4 {
            font-size: 0.65rem !important;
            margin-bottom: 4px !important;
            text-transform: uppercase !important;
            letter-spacing: 0.2px !important;
            line-height: 1.1 !important;
        }

    .summary-value {
        font-size: 1rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }

    .stages-table-wrapper,
    .customer-table-wrapper {
        border-radius: 8px !important; /* Stages specific */
        font-size: 0.8rem !important; /* Stages specific */
        flex: 1 !important;
        overflow: auto !important;
    }

    .customer-table-wrapper {
        padding: 0 8px !important; /* Override for regular modal */
    }

    .stages-table th {
        padding: 6px 3px !important; /* Stages specific */
        font-size: 0.65rem !important; /* Stages specific */
        text-transform: uppercase !important; /* Stages specific */
        letter-spacing: 0.2px !important; /* Stages specific */
        background: #f9fafb !important; /* Stages specific */
        border-bottom: 1px solid #e5e7eb !important; /* Stages specific */
        font-weight: 600 !important; /* Stages specific */
        color: #374151 !important; /* Stages specific */
        text-align: left !important; /* Stages specific */
        white-space: nowrap !important; /* Stages specific */
    }

    .customer-table th {
        padding: 8px 4px !important; /* Override for regular modal */
        font-size: 0.7rem !important; /* Override for regular modal */
    }

    .stages-table td,
    .customer-table td {
        padding: 6px 3px !important; /* Stages specific */
        font-size: 0.7rem !important; /* Stages specific */
    }

    .customer-table td {
        padding: 8px 4px !important; /* Override for regular modal */
        border-bottom: 1px solid #f3f4f6 !important; /* Override for regular modal */
    }

    .stages-table th.stage-journey-col,
    .stages-table td.stage-journey-cell {
        width: 20% !important;
        display: table-cell !important;
    }

    .stages-table th.stage-name-col,
    .stages-table td.stage-name-cell {
        width: 25% !important;
        display: table-cell !important;
    }

    .stages-table th.stage-contacts-col,
    .stages-table td.stage-contacts-cell {
        width: 15% !important;
        display: table-cell !important;
    }

    .stages-table th.stage-goal-col,
    .stages-table td.stage-goal-cell {
        width: 15% !important;
        display: table-cell !important;
    }

    .stages-table th.stage-revenue-col,
    .stages-table td.stage-revenue-cell {
        width: 15% !important;
        display: table-cell !important;
    }

    .stages-table th.stage-progress-col,
    .stages-table td.stage-progress-cell {
        width: 10% !important;
        display: table-cell !important;
    }

    .journey-name {
        font-size: 0.65rem !important;
        line-height: 1.1 !important;
        color: #1e40af !important;
        font-weight: 600 !important;
    }

    .stage-name {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
    }

    .stage-description {
        display: none !important;
    }

    .count-number {
        font-size: 0.8rem !important;
        font-weight: 700 !important;
    }

    .count-percentage {
        font-size: 0.6rem !important;
        opacity: 0.8 !important;
    }

    .stages-footer,
    .modal-footer {
        padding: 8px 12px !important;
        flex-direction: column !important;
        gap: 6px !important;
        text-align: center !important;
        flex-shrink: 0 !important;
    }

        .stages-footer .pagination-info p,
        .modal-footer .pagination-info p {
            font-size: 0.75rem !important;
        }

        .stages-footer .pagination-btn,
        .modal-footer .pagination-btn {
            width: 26px !important;
            height: 26px !important;
            font-size: 0.65rem !important;
        }

            .stages-footer .pagination-btn.page-number,
            .modal-footer .pagination-btn.page-number {
                min-width: 26px !important;
                padding: 0 3px !important;
            }

        .stages-footer .pagination-controls,
        .modal-footer .pagination-controls {
            gap: 3px !important;
        }

    .customer-search {
        padding: 12px 8px !important;
        flex-shrink: 0 !important;
    }

        .customer-search .search-input {
            font-size: 0.85rem !important;
            padding: 10px 35px 10px 12px !important;
        }

    .search-results-info p {
        font-size: 0.75rem !important;
        margin-top: 8px !important;
    }

    .market-flag .flag-icon {
        width: 16px !important;
        height: 12px !important;
    }

    .progress-container {
        gap: 4px !important;
    }

    .progress-bar {
        height: 6px !important;
        min-width: 30px !important;
    }

    .progress-text {
        font-size: 0.6rem !important;
        min-width: 24px !important;
    }

    .no-customers {
        padding: 40px 20px !important;
        font-size: 0.9rem !important;
    }
}

/* Filters Section */
.filters-section {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 30px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
    gap: 20px;
}

.filters-left {
    display: flex;
    gap: 20px;
    align-items: end;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-right: 16px;
}

    .filter-group label {
        font-weight: 700;
        color: #374151;
        font-size: 0.9rem;
        letter-spacing: -0.01em;
    }


/* ═══════════════════════════════════════════════════════════════
   AI CHAT STREAMED CONTENT STYLES (GLOBAL - NO BLAZOR SCOPING)
   These styles apply to HTML content injected via JavaScript SSE
   ═══════════════════════════════════════════════════════════════ */

/* Isolation island for chat output */
.insights-container .ai-message-content.chat-output {
    all: initial;
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #1f2937;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

/* Basic typography */
.insights-container .chat-output * {
    box-sizing: border-box;
}

/* Brand name formatting - only capitalize specific brand/category patterns */
.insights-container .chat-output td,
.insights-container .chat-output li {
    text-transform: none !important;
}

.insights-container .chat-output p {
    display: block;
    margin: 1rem 0;
    line-height: 1.65;
    color: #1f2937;
}

.insights-container .chat-output strong {
    font-weight: 600;
    color: #111827;
}

.insights-container .chat-output em {
    font-style: italic;
    color: #374151;
}

.insights-container .chat-output h4 {
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin: 1.5rem 0 1rem 0;
    line-height: 1.4;
}

.insights-container .chat-output h5 {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    margin: 1.25rem 0 0.75rem 0;
    line-height: 1.4;
}

/* TABLES - Critical for AI-generated tables */
.insights-container .chat-output table.hb-table {
    display: table !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 0.875rem !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin: 1.5rem 0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
    background: white !important;
    table-layout: auto !important;
}

    .insights-container .chat-output table.hb-table thead {
        display: table-header-group !important;
        background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%) !important;
    }

        .insights-container .chat-output table.hb-table thead tr {
            display: table-row !important;
            padding: 0 !important;
        }

        .insights-container .chat-output table.hb-table thead th {
            display: table-cell !important;
            background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%) !important;
            color: #111827 !important;
            font-weight: 600 !important;
            text-align: left !important;
            padding: 0.75rem 1rem !important;
            border-bottom: 2px solid #d1d5db !important;
            font-size: 0.8125rem !important;
            text-transform: none !important;
            letter-spacing: 0 !important;
            white-space: nowrap !important;
            overflow: visible !important;
            vertical-align: middle !important;
            min-width: fit-content !important;
        }

    .insights-container .chat-output table.hb-table tbody {
        display: table-row-group !important;
        background: white !important;
    }

        .insights-container .chat-output table.hb-table tbody tr {
            display: table-row !important;
            padding: 0 !important;
        }

        .insights-container .chat-output table.hb-table tbody td {
            display: table-cell !important;
            padding: 0.75rem 1rem !important;
            border-bottom: 1px solid #e5e7eb !important;
            color: #374151 !important;
            vertical-align: top !important;
            font-size: 0.8125rem !important;
            background: white !important;
            text-align: left !important;
            line-height: 1.4 !important;
            box-sizing: border-box !important;
        }

        .insights-container .chat-output table.hb-table tbody tr:nth-child(even) td {
            background: #f9fafb !important;
        }

        .insights-container .chat-output table.hb-table tbody tr:last-child td {
            border-bottom: none !important;
        }

    /* Force padding on all table cells - override any conflicting rules */
    .insights-container .chat-output table.hb-table td,
    .insights-container .chat-output table.hb-table th {
        padding: 0.75rem 1rem !important;
        box-sizing: border-box !important;
    }

/* LISTS - For AI-generated lists */
.insights-container .chat-output ul.hb-list,
.insights-container .chat-output ol.hb-list {
    display: block !important;
    margin: 1rem 0 !important;
    padding-left: 1.5rem !important;
    list-style-position: outside !important;
}

    .insights-container .chat-output ul.hb-list.hb-bullets {
        list-style-type: disc !important;
    }

    .insights-container .chat-output ul.hb-list li,
    .insights-container .chat-output ol.hb-list li {
        display: list-item !important;
        margin: 0.4rem 0 !important;
        line-height: 1.5 !important;
        color: #1f2937 !important;
    }

/* Compact Table Variant */
.insights-container .chat-output table.hb-table-compact thead th,
.insights-container .chat-output table.hb-table-compact tbody td {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
}

/* Mobile Responsive Tables */
@media (max-width: 768px) {
    .insights-container .chat-output table.hb-table {
        font-size: 0.75rem !important;
        margin: 1rem 0 !important;
    }

        .insights-container .chat-output table.hb-table thead th,
        .insights-container .chat-output table.hb-table tbody td {
            padding: 0.5rem 0.75rem !important;
            font-size: 0.75rem !important;
        }
}

@media (max-width: 480px) {
    .insights-container .chat-output table.hb-table {
        font-size: 0.6875rem !important;
    }

        .insights-container .chat-output table.hb-table thead th,
        .insights-container .chat-output table.hb-table tbody td {
            padding: 0.375rem 0.5rem !important;
            font-size: 0.6875rem !important;
        }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .comparison-charts {
        grid-template-columns: 1fr;
    }

    .chart-header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

        .chart-header h3 {
            text-align: center;
            min-width: auto;
        }

    .filters-section {
        flex-direction: column;
        align-items: stretch;
    }

    .filters-left {
        width: 100%;
        justify-content: space-between;
    }

    .filter-group {
        flex: 1;
        min-width: 0;
    }

    .custom-select {
        min-width: auto;
        width: 100%;
    }

    .chart-filter-dropdown {
        margin-left: 0;
        align-self: center;
    }

    .filter-group:has([for="journeyFilter"]) .custom-select,
    .filter-group:has([for="goalFilter"]) .custom-select {
        max-width: 300px;
    }
}


/* Table Search (Course Performance) */
.table-search-container {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 220px;
}

.table-search-input {
    width: 100%;
    padding: 8px 28px 8px 28px;
    border: 1px solid var(--lv-border-primary);
    border-radius: 6px;
    background: linear-gradient(145deg, #ffffff, #f9fafb);
    font-size: 12px;
    color: var(--lv-text-primary);
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
}

    .table-search-input:focus {
        outline: none;
        border-color: var(--lv-background-accent);
        box-shadow: 0 0 0 3px rgba(59,130,246,0.1), 0 2px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.9);
    }

.table-search-container::before {
    content: '';
    position: absolute;
    left: 8px;
    width: 16px;
    height: 16px;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") no-repeat center / contain;
}

.table-clear-search-btn {
    position: absolute;
    right: 4px;
    background: none;
    border: 0;
    color: var(--lv-text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

    .table-clear-search-btn:hover {
        color: var(--lv-text-primary);
        background: rgba(0, 0, 0, 0.05);
    }

@media (min-width: 768px) {
    .table-search-input {
        font-size: var(--lv-font-size-base);
    }
}

/* Journey Link Button Styles - Matching ActiveCampaignJourneys */
.journey-link {
    background: linear-gradient(145deg, #f9fafb, #f1f5f9);
    border: 1px solid var(--lv-border-primary);
    border-radius: var(--lv-border-radius-small);
    padding: calc(var(--lv-spacing-unit) * 0.75) calc(var(--lv-spacing-unit) * 1);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--lv-spacing-unit) * 0.25);
    min-width: 70px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

    .journey-link::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
        transition: left 0.5s ease;
        border-radius: inherit;
    }

    .journey-link:active {
        transform: translateY(0);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .journey-link:focus {
        outline: 2px solid var(--lv-background-accent);
        outline-offset: 2px;
    }

.customer-count {
    font-weight: 700;
    color: var(--lv-background-accent);
    font-size: 0.75rem;
    line-height: 1;
}

    .customer-count.clickable {
        color: #2563eb;
        font-weight: 600;
        font-size: 0.9rem;
        transition: all 0.2s ease;
    }

.clickable-row:hover .customer-count.clickable {
    color: #1d4ed8;
    text-decoration: underline;
}

.view-details-text {
    font-size: 0.7rem;
    color: var(--lv-text-secondary);
    text-transform: lowercase;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
}


.sku-cell {
    min-width: 100px;
}

.sku-code {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    background: rgba(102, 126, 234, 0.1);
    padding: 0.15rem 0.3rem;
    border-radius: 3px;
    font-size: 0.8rem;
    color: var(--lv-background-accent);
    border: 1px solid rgba(102, 126, 234, 0.2);
}

/* Desktop cell styles */
@media (min-width: 768px) {


    .sku-cell {
        min-width: 120px;
    }
}