/* /Components/CustomerClassificationLoading.razor.rz.scp.css */
/* Simple Loading Container */
.loading-container[b-mkdiivrwe9] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    background: white;
    border-radius: 12px;
    padding: 2rem;
    max-width: 95%;
    margin: 0 auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.loading-message[b-mkdiivrwe9] {
    text-align: center;
    color: #6b7280;
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
}

.loading-spinner[b-mkdiivrwe9] {
    width: 50px;
    height: 50px;
    border: 3px solid #e5e7eb;
    border-top: 3px solid #000000;
    border-radius: 50%;
    animation: spin-b-mkdiivrwe9 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin-b-mkdiivrwe9 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-message p[b-mkdiivrwe9] {
    margin: 0;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
    .loading-container[b-mkdiivrwe9] {
        padding: 1rem;
        margin: 0.5rem;
        min-height: 300px;
    }
    
    .loading-message[b-mkdiivrwe9] {
        font-size: 14px;
    }
    
    .loading-spinner[b-mkdiivrwe9] {
        width: 20px;
        height: 20px;
        border-width: 2px;
        border-top-width: 2px;
    }
} 
/* /Components/CustomerSearchComponent.razor.rz.scp.css */
.hero[b-9kmgak04v1] {
    padding: 10px 24px 80px;
    text-align: center;
}

.hero-title[b-9kmgak04v1] {
    font-size: 1.65rem;
    font-weight: 600;
    margin-bottom: 32px;
}

.hero-search[b-9kmgak04v1] {
    max-width: 700px;
    margin: 0 auto;
}

/* Search input - Slick pill-shaped design */
.search-input-container[b-9kmgak04v1] {
    display: flex;
    position: relative;
    align-items: center;
    border: 1px solid #00000040;
    border-radius: 50px; /* More rounded for pill shape */
    padding: 12px 20px;
    background: #fff;
    transition: all 0.3s ease;
    margin: 0 auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Desktop: wider search bar */
@media (min-width: 768px) {
    .search-input-container[b-9kmgak04v1] {
        max-width: 800px;
        width: 100%;
    }
}

/* Mobile: constrained width */
@media (max-width: 767px) {
    .search-input-container[b-9kmgak04v1] {
        max-width: 600px;
    }
}


.loading-overlay[b-9kmgak04v1] {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    /* same width as container, and small padding gap */
    margin-top: 0.25rem;
    display: flex;
    justify-content: center;
}

.spinner[b-9kmgak04v1] {
    width: 24px;
    height: 24px;
    border: 3px solid #dfe1e5;
    border-top-color: #555;
    border-radius: 50%;
    animation: spin-b-9kmgak04v1 0.8s linear infinite;
}

/* spin keyframes */
@keyframes spin-b-9kmgak04v1 {
    to {
        transform: rotate(360deg);
    }
}

.search-input-container:focus-within[b-9kmgak04v1] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.search-input[b-9kmgak04v1] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    padding: 0;
    background: transparent;
    color: #000;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 400;
    width: 100%;
}

.search-input[b-9kmgak04v1]::placeholder {
    color: transparent;
    font-weight: 400;
}

/* Placeholder container */
.placeholder-container[b-9kmgak04v1] {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.placeholder-text[b-9kmgak04v1] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 400;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    perspective: 100px;
    transform-style: preserve-3d;
}

.base-text[b-9kmgak04v1] {
    display: inline;
}

.suffix-text[b-9kmgak04v1] {
    display: inline-block;
    position: relative;
    height: 20px;
    overflow: hidden;
    vertical-align: top;
}

/* Slow rolling up animation */
@keyframes slowRollUp-b-9kmgak04v1 {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-40px);
        opacity: 0;
    }
}

@keyframes slowRollDown-b-9kmgak04v1 {
    0% {
        transform: translateY(40px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.suffix-text.rolling-up[b-9kmgak04v1] {
    animation: slowRollUp-b-9kmgak04v1 1.2s ease-in-out forwards;
}

.suffix-text.rolling-down[b-9kmgak04v1] {
    animation: slowRollDown-b-9kmgak04v1 1.2s ease-in-out forwards;
}

/* Erase button styling */
.erase-button[b-9kmgak04v1] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    color: #000;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 400;
    transition: opacity 0.2s ease;
    margin-left: 8px;
}

.erase-button:hover[b-9kmgak04v1] {
    opacity: 0.7;
}

/* ─ CONTROLS BAR ─ */
.controls-bar[b-9kmgak04v1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1100px;
    margin: 0 auto 1rem;
    padding: 0 24px;
}

/* Updated filter toggle button to match CustomerClassification styling */
.btn-filter-toggle[b-9kmgak04v1] {
    background: linear-gradient(145deg, #000000, #333333);
    color: #fff;
    border: 2px solid transparent;
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.btn-filter-toggle[b-9kmgak04v1]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.btn-filter-toggle:hover[b-9kmgak04v1]::before {
    left: 100%;
}

.btn-filter-toggle:hover[b-9kmgak04v1] {
    background: linear-gradient(145deg, #333333, #000000);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-filter-toggle .chevron[b-9kmgak04v1] {
    margin-left: 0.5rem;
    font-weight: bold;
    font-size: 14px;
    transition: transform 0.3s ease;
}

/* ─ CONTENT + SIDEBAR OVERLAY & RESULTS SHIFT ─ */
.content[b-9kmgak04v1] {
    display: flex;
    position: relative; /* for absolute sidebar */
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    gap: 32px;
}

/* 1) Absolute sidebar slides in/out via transform */
.filters-sidebar[b-9kmgak04v1] {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 220px;
    background: #efefef00;
    padding: 24px;
    border-radius: 8px;
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .3s ease, opacity .3s ease;
}

    .filters-sidebar.visible[b-9kmgak04v1] {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

/* 2) Results area always flex:1, but we add a transition on margin */
.results-area[b-9kmgak04v1] {
    flex: 1;
    transition: margin-left .3s ease;
    margin-left: 0;
}

/* 3) When the sidebar is visible, push the results over */
.filters-sidebar.visible ~ .results-area[b-9kmgak04v1] {
    margin-left: 220px;
}

/* Checkbox grid */
.market-checkboxes[b-9kmgak04v1] {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(120px,1fr));
    gap: 0.5rem;
    border-bottom: 1px solid #a9a9a999;
    max-height: 260px;
    overflow-y: auto;
}

    .market-checkboxes label[b-9kmgak04v1] {
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

/* ─ MODAL ACTIONS (mobile) ─ */
.modal-actions[b-9kmgak04v1] {
    display: none;
}

@media (max-width: 768px) {
    .filters-sidebar[b-9kmgak04v1] {
        position: fixed;
        inset: 0;
        width: 100%;
        padding-top: 8rem; 
        height: 100vh;
        border-radius: 0;
        display: none;
        opacity: 1 !important;
        pointer-events: auto !important;
        transition: none;
        z-index: 1000;
    }

        .filters-sidebar .close-sidebar[b-9kmgak04v1] {
            display: block;
          
        }

    .hero[b-9kmgak04v1][b-9kmgak04v1] {
        padding: 20px;
        text-align: center;
    }

    .hero-title[b-9kmgak04v1][b-9kmgak04v1] {
        font-size: 1.4rem;
        font-weight: 600;
        margin-bottom: 32px;
    }

    .filters-sidebar.visible[b-9kmgak04v1] {
        display: block;
        background: white;
    }

    .search-input[b-9kmgak04v1][b-9kmgak04v1] {
        flex: 1;
        border: none;
        outline: none;
        font-size: 14px;
        padding: 0.5rem;
        background: transparent;
        color: #202124;
    }

    .modal-actions[b-9kmgak04v1] {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #dfe1e5;
        padding: 1rem;
        gap: 1rem; /* space between buttons */
        justify-content: center; /* center the whole group */
    }

    .btn-clear[b-9kmgak04v1],
    .btn-apply[b-9kmgak04v1] {
        flex: 1; /* equal width */
        padding: 0.75rem 0;
        font-size: 0.95rem;
        border-radius: 24px;
        text-align: center; /* center text */
    }

    .btn-clear[b-9kmgak04v1] {
        background: #e0e0e0;
        color: #000;
    }

    .btn-apply[b-9kmgak04v1] {
        background: #000000;
        color: #fff;
    }

    .page-root.modal-open[b-9kmgak04v1] {
        overflow: hidden;
    }

    .filters-sidebar .close-sidebar[b-9kmgak04v1] {
        position: absolute;
        right: 16px;
        background: none;
        border: none;
        font-size: 1.5rem;
        line-height: 1;
        color: #000;
        cursor: pointer;
        padding:10px;
    }

    .detail-label[b-9kmgak04v1][b-9kmgak04v1] {
        font-weight: bold;
        color: #000000;
        font-size: 14px;
    }

    .detail-value[b-9kmgak04v1][b-9kmgak04v1] {
        color: #0000009c;
        word-break: break-word;
        font-size: 13px;
    }
}

/* ─ RESULTS AREA & CARDS ─ */
.results-area[b-9kmgak04v1] {
    transition: margin-left .3s ease;
    margin-left: 0; /* default: full-width */
}

.search-results[b-9kmgak04v1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.result-card[b-9kmgak04v1] {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.result-card[b-9kmgak04v1]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.03), transparent);
    transition: left 0.5s ease;
}

.result-card:hover[b-9kmgak04v1]::before {
    left: 100%;
}

.result-card:hover[b-9kmgak04v1] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #000000;
}

.result-header[b-9kmgak04v1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 0.75rem;
}

.result-header svg[b-9kmgak04v1] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #374151;
}

.result-header h3[b-9kmgak04v1] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    flex-grow: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-header .fi[b-9kmgak04v1] {
    width: 24px;
    height: 18px;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    object-fit: cover;
}

.market-tag[b-9kmgak04v1] {
    margin-left: auto;
    background: #000;
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
}

.result-details[b-9kmgak04v1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1;
}

.detail-item[b-9kmgak04v1] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.25rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.detail-item:last-child[b-9kmgak04v1] {
    border-bottom: none;
}

.detail-label[b-9kmgak04v1] {
    font-weight: 600;
    color: #374151;
    font-size: 0.75rem;
    letter-spacing: -0.01em;
    flex-shrink: 0;
    min-width: 100px;
}

.detail-value[b-9kmgak04v1] {
    color: #6b7280;
    font-size: 0.75rem;
    text-align: right;
    word-break: break-all;
    font-weight: 500;
    max-width: 60%;
}

/* ─ PAGINATION ─ */
.pagination-container[b-9kmgak04v1] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.pagination-button[b-9kmgak04v1] {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    width: 30px;
    height: 30px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: #374151;
}

.pagination-button:hover:not(:disabled)[b-9kmgak04v1] {
    background: linear-gradient(145deg, #f9fafb, #f3f4f6);
    border-color: #000000;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pagination-button:disabled[b-9kmgak04v1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-counter[b-9kmgak04v1] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0.25rem 0.75rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .search-results[b-9kmgak04v1] {
        grid-template-columns: 1fr;
    }
}

/* ─ CUSTOM CHECKBOX STYLES FOR MARKET FILTER ─ */

/* 1. Make label a flex container and hide native box */
.market-checkboxes label[b-9kmgak04v1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
    user-select: none;
    position: relative;
    font-size: 0.95rem;
}

.market-checkboxes input[type="checkbox"][b-9kmgak04v1] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    border-color: #000 !important;
    pointer-events: none;
}

/* 2. Draw the custom square before the span */
.market-checkboxes .checkbox-label-text[b-9kmgak04v1]::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #000; /* black border */
    border-radius: 4px;
    background: #fff; /* white background when unchecked */
    transition: background-color .2s ease, border-color .2s ease;
    margin-right: 0.5rem;
    vertical-align: top; /* ensure it aligns from its top edge */
}

.market-checkboxes .checkbox-label-text[b-9kmgak04v1]::after {
    content: "✔";
    position: absolute;
    left: 4px;
    top: 45%;
    transform: translateY(-50%) scale(0);
    color: #fff; /* white checkmark */
    font-size: 14px;
    line-height: 1;
    transition: transform .15s ease;
}

/* 4. When checked: fill box blue and show checkmark */
.market-checkboxes input[type="checkbox"]:checked + .checkbox-label-text[b-9kmgak04v1]::before {
    background-color: #000; /* black background when checked */
    border-color: #000; /* black border when checked */
}

.market-checkboxes input[type="checkbox"]:checked + .checkbox-label-text[b-9kmgak04v1]::after {
    transform: translateY(-50%) scale(1);
}

.close-sidebar[b-9kmgak04v1] {
    display: block;
    position: absolute;
    right: 16px;
    top: 16px;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #000;
    cursor: pointer;
    padding: 10px;
    z-index: 10;
    transition: all 0.2s ease;
}

.close-sidebar:hover[b-9kmgak04v1] {
    color: #666;
    transform: scale(1.1);
}

/* 5. Hover state on the box */
.market-checkboxes label:hover .checkbox-label-text[b-9kmgak04v1]::before {
    border-color: #a9a9a999;
}
/* Style all filter headings */
.filter-label[b-9kmgak04v1] {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
    text-transform: uppercase; /* if you like uppercase */
    letter-spacing: 0.02em; /* for a little tracking */
}

/* If you need finer control, you can also target by container: */
.filters-sidebar .filter-label[b-9kmgak04v1] {
    margin-top: 1rem;
    margin-bottom: 0.75rem;
}

/* Example: make the label italic and gray */
.filter-label.italic[b-9kmgak04v1] {
    font-style: italic;
    color: #666;
}
.result-count[b-9kmgak04v1] {
   
  font-weight: bold;
  color: #333;
  margin-left: 1rem;
  font-size:0.9rem;
  
}
/* /Components/DatabaseConnectionOverlay.razor.rz.scp.css */
.database-overlay[b-8ks64vtd9h] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    pointer-events: none;
}

.database-overlay.visible[b-8ks64vtd9h] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.overlay-backdrop[b-8ks64vtd9h] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.overlay-content[b-8ks64vtd9h] {
    position: relative;
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideIn-b-8ks64vtd9h 0.3s ease-out;
}

@keyframes slideIn-b-8ks64vtd9h {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.overlay-header[b-8ks64vtd9h] {
    padding: 24px 24px 16px;
    border-bottom: 1px solid #e5e7eb;
    text-align: center;
}

.warning-icon[b-8ks64vtd9h] {
    color: #f59e0b;
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
}

.overlay-header h2[b-8ks64vtd9h] {
    margin: 0;
    color: #1f2937;
    font-size: 1.5rem;
    font-weight: 600;
}

.overlay-body[b-8ks64vtd9h] {
    padding: 20px 24px;
}

.warning-message[b-8ks64vtd9h] {
    color: #374151;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 20px;
    text-align: center;
}

.impact-list h4[b-8ks64vtd9h],
.recommendations h4[b-8ks64vtd9h] {
    color: #1f2937;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 16px 0 8px 0;
}

.impact-list ul[b-8ks64vtd9h],
.recommendations ul[b-8ks64vtd9h] {
    color: #6b7280;
    padding-left: 20px;
    margin: 0 0 16px 0;
}

.impact-list li[b-8ks64vtd9h],
.recommendations li[b-8ks64vtd9h] {
    margin-bottom: 4px;
    line-height: 1.4;
}

.overlay-footer[b-8ks64vtd9h] {
    padding: 16px 24px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.check-again-btn[b-8ks64vtd9h] {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    justify-content: center;
}

.check-again-btn:disabled[b-8ks64vtd9h] {
    opacity: 0.6;
    cursor: not-allowed;
}

.understand-btn[b-8ks64vtd9h] {
    background: #1f2937;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    justify-content: center;
}

/* Responsive design */
@media (max-width: 640px) {
    .overlay-content[b-8ks64vtd9h] {
        width: 95%;
        margin: 20px;
    }

    .overlay-header[b-8ks64vtd9h] {
        padding: 20px 20px 12px;
    }

    .overlay-body[b-8ks64vtd9h] {
        padding: 16px 20px;
    }

    .overlay-footer[b-8ks64vtd9h] {
        padding: 12px 20px 20px;
    }

    .overlay-header h2[b-8ks64vtd9h] {
        font-size: 1.25rem;
    }
}
/* /Components/DateFilter.razor.rz.scp.css */
/* Custom Calendar Styles */
.custom-calendar[b-1eb3u3h7ry] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-radius: 12px;
}

.calendar-container[b-1eb3u3h7ry] {
    display: flex;
    gap: 1.5rem;
    max-width: 680px;
    margin: 0 auto;
}

.calendar-section[b-1eb3u3h7ry] {
    flex: 1;
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.03);
    min-width: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.calendar-section:hover[b-1eb3u3h7ry] {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 6px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.calendar-section h4[b-1eb3u3h7ry] {
    margin: 0 0 1.25rem 0;
    color: #2c3e50;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.5px;
}

.calendar-header[b-1eb3u3h7ry] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.month-navigation[b-1eb3u3h7ry] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    border-radius: 8px;
    padding: 0.5rem;
}

    .month-navigation button[b-1eb3u3h7ry] {
        background: white;
        /* border: 1px solid #ddd; */
        font-size: 1rem;
        cursor: pointer;
        color: #333;
        padding: 0.35rem 0.6rem;
        transition: all 0.3s ease;
        border-radius: 6px;
        /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); */
        font-weight: 600;
    }

.month-navigation button:hover[b-1eb3u3h7ry] {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #333333 0%, #666666 100%);
    color: white;
    border-color: transparent;
}

.month-navigation button:active[b-1eb3u3h7ry] {
    transform: translateY(0) scale(0.98);
}

.month-year[b-1eb3u3h7ry] {
    font-weight: 700;
    font-size: 1.15rem;
    min-width: 8rem;
    text-align: center;
    color: black;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.year-selector[b-1eb3u3h7ry] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 0.6rem;
    border-radius: 10px;
}

    .year-selector button[b-1eb3u3h7ry] {
        background: #ffffff;
        /* border: 1px solid #ddd; */
        font-size: 0.95rem;
        cursor: pointer;
        color: #333;
        padding: 0.3rem 0.6rem;
        transition: all 0.3s ease;
        border-radius: 5px;
        font-weight: 600;
}

.year-selector button:hover[b-1eb3u3h7ry] {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #333333 0%, #666666 100%);
    color: white;
    border-color: transparent;
}

.year-selector span[b-1eb3u3h7ry] {
    font-weight: 700;
    font-size: 1rem;
    min-width: 4rem;
    text-align: center;
    color: #2c3e50;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.comparison-info[b-1eb3u3h7ry] {
    text-align: center;
    padding: 1.25rem;
    /* background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); */
    border-radius: 10px;
    margin: 0.75rem 0;
    /* border: 1px solid rgba(0, 0, 0, 0.1); */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.comparison-info p[b-1eb3u3h7ry] {
    margin: 0;
    color: #37474f;
    font-weight: 600;
    font-size: 1rem;
}

.comparison-info .date-range[b-1eb3u3h7ry] {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #546e7a;
    font-weight: 500;
}

.calendar-grid[b-1eb3u3h7ry] {
    gap: 0.5rem;
}

.weekdays[b-1eb3u3h7ry] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    border-radius: 8px;
}

.weekday[b-1eb3u3h7ry] {
    text-align: center;
    font-size: 0.85rem;
    color: #546e7a;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.days[b-1eb3u3h7ry] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
}

.day[b-1eb3u3h7ry] {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    color: #37474f;
    user-select: none;
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.day:hover[b-1eb3u3h7ry] {
    background: linear-gradient(135deg, #333333 0%, #666666 100%);
    color: white;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-color: transparent;
}

.day.selected[b-1eb3u3h7ry] {
    background: linear-gradient(135deg, #333333 0%, #666666 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transform: scale(1.02);
    border-color: transparent;
}

.day.today[b-1eb3u3h7ry] {
    background: linear-gradient(135deg, #333333 0%, #666666 100%);
    color: white;
    border: 2px solid #222;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.day.today[b-1eb3u3h7ry]::after {
    content: '●';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 6px;
    color: inherit;
}

.day.in-range[b-1eb3u3h7ry] {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.12) 100%);
    color: #2c3e50;
    border-color: rgba(0, 0, 0, 0.2);
}

.day.holiday[b-1eb3u3h7ry]::before {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 5px;
    height: 5px;
    background: #d32f2f;
    border-radius: 50%;
    z-index: 1;
}

.day.disabled[b-1eb3u3h7ry] {
    opacity: 0.4;
    color: #bdbdbd;
    pointer-events: auto;
    cursor: not-allowed;
    background: linear-gradient(145deg, #f5f5f5 0%, #eeeeee 100%);
    border-color: #e0e0e0;
}

.day.empty[b-1eb3u3h7ry] {
    background: transparent;
    cursor: default;
    border: none;
    box-shadow: none;
}

.calendar-actions[b-1eb3u3h7ry] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.apply-button[b-1eb3u3h7ry], .cancel-button[b-1eb3u3h7ry] {
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.apply-button[b-1eb3u3h7ry] {
    background: white;
    color: #333;
    border: 1px solid #ddd;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.apply-button:hover[b-1eb3u3h7ry] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #333333 0%, #666666 100%);
    color: white;
    border-color: transparent;
}

.apply-button:disabled[b-1eb3u3h7ry] {
    background: linear-gradient(135deg, #bdbdbd 0%, #9e9e9e 100%);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.cancel-button[b-1eb3u3h7ry] {
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    color: #546e7a;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.cancel-button:hover[b-1eb3u3h7ry] {
    background: linear-gradient(145deg, #f5f5f5 0%, #eeeeee 100%);
    color: #37474f;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.inline-year-selector[b-1eb3u3h7ry] {
    display: none;
}

/* In your app.css or component <style> */

        .calendar-section .day.disabled[b-1eb3u3h7ry] {
    /* fade it out */
    color: #ccc;
    opacity: 0.5;
    /* show "not-allowed" cursor */
    cursor: not-allowed !important;
    /* block clicks/hover */
    pointer-events: none;
}

    /* prevent any hover styles from kicking in */
    .calendar-section .day.disabled:hover[b-1eb3u3h7ry] {
        background: transparent;
    }

/* Completely new mobile styles */
@media (max-width: 768px) {
    /* a) Hide the original bottom picker */
    .global-year-selector[b-1eb3u3h7ry] {
        display: none !important;
    }

    /* b) Show the two new per-calendar mobile pickers */
    .mobile-global-year-selector[b-1eb3u3h7ry] {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        margin-bottom: 0.5rem;
        padding: 0.5rem;
        background: #ffffff;
        border-radius: 4px;
    }

    .year-selector span[b-1eb3u3h7ry][b-1eb3u3h7ry] {
        font-weight: 600;
        font-size: 14px;
        min-width: 4rem;
        text-align: center;
        color: #333;
    }

    /* c) Flex the calendar-header row (month nav + inline year) */
    .calendar-section > .calendar-header[b-1eb3u3h7ry] {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .calendar-container[b-1eb3u3h7ry] {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100% !important;
        padding: 0 !important; /* remove any side padding */
        margin: 0 auto !important;
        max-width: none !important; /* override the 680px cap */
    }

    .calendar-section[b-1eb3u3h7ry] {
        width: 100% !important;
        margin: 0 !important; /* remove extra side margins */
        box-shadow: none; /* optional: remove desktop shadows */
        border: 1px solid #eee; /* keep your border or adjust as needed */
    }

    .calendar-grid[b-1eb3u3h7ry] {
        margin: 0;
    }

    .month-year[b-1eb3u3h7ry]{
        font-size:13px;
    }
    .weekdays[b-1eb3u3h7ry] {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
        margin-bottom: 0.25rem;
    }

    .weekday[b-1eb3u3h7ry] {
        font-size: 0.8rem;
        padding: 0.25rem;
    }

    .days[b-1eb3u3h7ry] {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
    }

    .day[b-1eb3u3h7ry] {
        aspect-ratio: 1;
        min-height: 38px;
        font-size: 0.8rem;
        margin: 0;
    }

    .comparison-info[b-1eb3u3h7ry] {
        background: white;
        padding: 0.75rem;
        margin: 0.5rem 0;
        border: 1px solid #eee;
        border-radius: 4px;
    }
        .calendar-actions[b-1eb3u3h7ry] {
        display: flex;
        gap: 0.5rem;
        justify-content: flex-end;
        margin-top: 1rem;
        padding: 0.5rem;
        background: white;
        border-top: 1px solid #eee;
    }

    .apply-button[b-1eb3u3h7ry], .cancel-button[b-1eb3u3h7ry] {
        max-width: 120px;
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .calendar-dropdown-menu[b-1eb3u3h7ry] {
        position: fixed;
        top: 8.5rem;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        min-height: 75dvh;
        background: white;
        z-index: 1000;
        padding: 1rem;
        overflow-y: auto;
    }
}

/* 3) Desktop restore (≥769px) just in case */
@media (min-width: 769px) {
    .mobile-global-year-selector[b-1eb3u3h7ry] {
        display: none !important;
    }

    .global-year-selector[b-1eb3u3h7ry] {
        display: flex !important;
    }
}
/* /Components/KpiCardsComponent.razor.rz.scp.css */
.kpi-cards-view[b-cikx0sg9re] {
    padding: 2.5rem;
    border-radius: 0;
    margin: 0;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
}

/* Scorecard Header */
.scorecard-header[b-cikx0sg9re] {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem 0;
}

.scorecard-title[b-cikx0sg9re] {
    font-size: 3rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 0.5rem 0;
    text-shadow: none;
    background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
    -webkit-text-fill-color: transparent;
}

.scorecard-subtitle[b-cikx0sg9re] {
    font-size: 1.2rem;
    color: #64748b;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Main Metrics Grid */
.main-metrics-grid[b-cikx0sg9re] {
    display: grid;
    /* Fixed 3-column layout */
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 2rem;
    /* Take full width */
    width: 100%;
    margin: 0;
    padding: 2rem 0;
}

/* Loader Container */
.loader-container[b-cikx0sg9re] {
    grid-column: 1 / -1; /* Span all columns */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px; /* Sufficient height for proper centering */
    width: 100%;
    padding: 2rem 0; /* Add some vertical padding */
}

.metric-card[b-cikx0sg9re] {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 50%, #1e293b 100%);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.3),
                0 4px 16px rgba(15, 23, 42, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}

/* Specific positioning for each card */
.aov-card[b-cikx0sg9re] {
    grid-row: 1;
    grid-column: 1;
}

.aof-card[b-cikx0sg9re] {
    grid-row: 2;
    grid-column: 1;
}

.upgrade-card[b-cikx0sg9re] {
    grid-row: 1;
    grid-column: 2;
}

.downgrade-card[b-cikx0sg9re] {
    grid-row: 2;
    grid-column: 2;
}

.retention-card[b-cikx0sg9re] {
    grid-row: 1;
    grid-column: 3;
}

.new-customers-card[b-cikx0sg9re] {
    grid-row: 2;
    grid-column: 3;
}

.metric-card[b-cikx0sg9re]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4);
    border-radius: 16px 16px 0 0;
}

.metric-card:hover[b-cikx0sg9re] {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.4),
                0 10px 30px rgba(15, 23, 42, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Card Color Coding - Conditional based on target performance */

/* Default card colors (neutral) */
.aov-card[b-cikx0sg9re]::before,
.aof-card[b-cikx0sg9re]::before,
.upgrade-card[b-cikx0sg9re]::before,
.downgrade-card[b-cikx0sg9re]::before,
.retention-card[b-cikx0sg9re]::before,
.new-customers-card[b-cikx0sg9re]::before {
    background: linear-gradient(90deg, #64748b, #94a3b8);
}

/* Target Met - Green accent */
.target-met[b-cikx0sg9re]::before {
    background: linear-gradient(90deg, #16a34a, #22c55e) !important;
}

.target-met[b-cikx0sg9re] {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.target-met:hover[b-cikx0sg9re] {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Target Missed - Red accent */
.target-missed[b-cikx0sg9re]::before {
    background: linear-gradient(90deg, #dc2626, #ef4444) !important;
}

.target-missed[b-cikx0sg9re] {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.target-missed:hover[b-cikx0sg9re] {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Enhanced difference indicators for target performance */
.target-met .kpi-difference.positive[b-cikx0sg9re] {
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.target-missed .kpi-difference.negative[b-cikx0sg9re] {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
}

/* KPI Card Base Styles */
.kpi-card[b-cikx0sg9re] {
    position: relative;
}

.kpi-frequency[b-cikx0sg9re] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.1);
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 10;
    white-space: nowrap;
    min-width: fit-content;
}

.win-section .kpi-frequency[b-cikx0sg9re] {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.1);
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
}

.kpi-card-header[b-cikx0sg9re] {
    margin-bottom: 1.25rem;
}

.kpi-card-header h4[b-cikx0sg9re] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: white;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.win-section .kpi-card-header h4[b-cikx0sg9re] {
    color: white;
    font-size: 1.1rem;
}

.kpi-card-value[b-cikx0sg9re] {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    line-height: 1;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.win-section .kpi-card-value[b-cikx0sg9re] {
    color: white;
    font-size: 3.5rem;
}

.primary-kpi .kpi-card-value[b-cikx0sg9re] {
    font-size: 5rem;
    background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
}

.previous-value[b-cikx0sg9re] {
    font-size: 1.1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

.win-section .previous-value[b-cikx0sg9re] {
    color: rgba(255, 255, 255, 0.8);
}

/* KPI Details */
.kpi-details[b-cikx0sg9re] {
    font-size: 0.85rem;
    line-height: 1.5;
}

.kpi-target[b-cikx0sg9re], .kpi-last-period[b-cikx0sg9re], .kpi-churn[b-cikx0sg9re], .kpi-winback[b-cikx0sg9re], .kpi-conversion[b-cikx0sg9re] {
    margin-bottom: 0.4rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.win-section .kpi-details[b-cikx0sg9re] {
    color: rgba(255, 255, 255, 0.9);
}

.kpi-difference[b-cikx0sg9re] {
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    display: inline-block;
}

.kpi-difference.positive[b-cikx0sg9re] {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.kpi-difference.negative[b-cikx0sg9re] {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.win-section .kpi-difference.positive[b-cikx0sg9re] {
    color: #86efac;
    background: rgba(134, 239, 172, 0.1);
}

.win-section .kpi-difference.negative[b-cikx0sg9re] {
    color: #fca5a5;
    background: rgba(252, 165, 165, 0.1);
}

.conversion-detail[b-cikx0sg9re] {
    font-weight: 700;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .main-metrics-grid[b-cikx0sg9re] {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .scorecard-title[b-cikx0sg9re] {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .kpi-cards-view[b-cikx0sg9re] {
        padding: 1.5rem;
        margin: 0.5rem;
    }

    .scorecard-title[b-cikx0sg9re] {
        font-size: 1.8rem;
    }

    .scorecard-subtitle[b-cikx0sg9re] {
        font-size: 1rem;
    }

    .main-metrics-grid[b-cikx0sg9re] {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .metric-card[b-cikx0sg9re] {
        padding: 1rem;
        padding-top: 2.5rem; /* Extra space for frequency badge */
    }

    .kpi-card-value[b-cikx0sg9re] {
        font-size: 1.8rem;
    }

    .kpi-frequency[b-cikx0sg9re] {
        font-size: 0.6rem;
        padding: 0.3rem 0.6rem;
        top: 0.75rem;
        right: 0.75rem;
    }
}

@media (max-width: 640px) {
    .main-metrics-grid[b-cikx0sg9re] {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, auto);
        gap: 1rem;
        padding: 0 1rem; /* Add padding to the container */
    }

    .scorecard-title[b-cikx0sg9re] {
        font-size: 1.5rem;
    }

    .kpi-card-value[b-cikx0sg9re] {
        font-size: 1.5rem;
    }

    .metric-card[b-cikx0sg9re] {
        padding: 1rem;
        padding-top: 3rem; /* More space for frequency badge on mobile */
    }

    .kpi-frequency[b-cikx0sg9re] {
        font-size: 0.55rem;
        padding: 0.25rem 0.5rem;
        top: 0.5rem;
        right: 0.5rem;
        border-radius: 6px;
    }

    /* Override grid positioning for mobile - let cards flow naturally */
    .aov-card[b-cikx0sg9re],
    .aof-card[b-cikx0sg9re],
    .upgrade-card[b-cikx0sg9re],
    .downgrade-card[b-cikx0sg9re],
    .retention-card[b-cikx0sg9re],
    .new-customers-card[b-cikx0sg9re] {
        grid-column: 1; /* All cards in column 1 */
    }

    .aov-card[b-cikx0sg9re] { grid-row: 1; }
    .aof-card[b-cikx0sg9re] { grid-row: 2; }
    .upgrade-card[b-cikx0sg9re] { grid-row: 3; }
    .downgrade-card[b-cikx0sg9re] { grid-row: 4; }
    .retention-card[b-cikx0sg9re] { grid-row: 5; }
    .new-customers-card[b-cikx0sg9re] { grid-row: 6; }
}

/* Additional responsive fix for very small screens */
@media (max-width: 480px) {
    .main-metrics-grid[b-cikx0sg9re] {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, auto);
        gap: 0.75rem;
        padding: 0 0.5rem; /* Smaller padding on very small screens */
    }

    .kpi-frequency[b-cikx0sg9re] {
        position: relative;
        top: auto;
        right: auto;
        display: inline-block;
        margin-bottom: 0.5rem;
        float: right;
    }

    .metric-card[b-cikx0sg9re] {
        padding: 0.75rem;
        padding-top: 2rem;
    }

    /* Override grid positioning for very small screens */
    .aov-card[b-cikx0sg9re],
    .aof-card[b-cikx0sg9re],
    .upgrade-card[b-cikx0sg9re],
    .downgrade-card[b-cikx0sg9re],
    .retention-card[b-cikx0sg9re],
    .new-customers-card[b-cikx0sg9re] {
        grid-column: 1; /* All cards in column 1 */
    }

    .aov-card[b-cikx0sg9re] { grid-row: 1; }
    .aof-card[b-cikx0sg9re] { grid-row: 2; }
    .upgrade-card[b-cikx0sg9re] { grid-row: 3; }
    .downgrade-card[b-cikx0sg9re] { grid-row: 4; }
    .retention-card[b-cikx0sg9re] { grid-row: 5; }
    .new-customers-card[b-cikx0sg9re] { grid-row: 6; }
}

/* /Components/SalesAnalyticsDateFilter.razor.rz.scp.css */
/* Sales Analytics Date Filter Styles - Matching Market Filter Design */

/* Filter button containers */
.date-filter-container[b-oweibt5fba] {
    position: relative;
}

/* Chip Button Styles for Tab Navigation */
.chip-btn[b-oweibt5fba] {
    padding: 6px 10px;
    border: 1px solid var(--lv-border-primary);
    border-radius: 999px;
    background: linear-gradient(145deg, var(--lv-background-primary), var(--lv-background-secondary));
    color: var(--lv-text-primary);
    font-size: var(--lv-font-size-small);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.chip-btn:hover[b-oweibt5fba] {
    transform: translateY(-1px);
    border-color: var(--lv-background-accent);
    background: linear-gradient(145deg, var(--lv-hover-background), var(--lv-background-secondary));
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.chip-btn.active[b-oweibt5fba] {
    background: linear-gradient(145deg, var(--lv-background-accent), var(--lv-hover-accent));
    color: var(--lv-text-inverted);
    border-color: var(--lv-background-accent);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* Bulk Select Bar */
.bulk-select-bar[b-oweibt5fba] {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--lv-border-secondary);
    background: linear-gradient(145deg, var(--lv-background-primary), var(--lv-hover-background));
}

/* Custom Calendar Styles */
.custom-calendar[b-oweibt5fba] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-radius: 12px;
}

.calendar-container[b-oweibt5fba] {
    display: flex;
    gap: 1.5rem;
    max-width: 680px;
    margin: 0 auto;
}

.calendar-section[b-oweibt5fba] {
    flex: 1;
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.03);
    min-width: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.calendar-section:hover[b-oweibt5fba] {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 6px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.calendar-section h4[b-oweibt5fba] {
    margin: 0 0 1.25rem 0;
    color: #2c3e50;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.5px;
}

.calendar-header[b-oweibt5fba] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.month-navigation[b-oweibt5fba] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    border-radius: 8px;
    padding: 0.5rem;
}

.month-navigation button[b-oweibt5fba] {
    background: white;
    font-size: 1rem;
    cursor: pointer;
    color: #333;
    padding: 0.35rem 0.6rem;
    transition: all 0.3s ease;
    border-radius: 6px;
    font-weight: 600;
}

.month-navigation button:hover[b-oweibt5fba] {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #333333 0%, #666666 100%);
    color: white;
    border-color: transparent;
}

.month-navigation button:active[b-oweibt5fba] {
    transform: translateY(0) scale(0.98);
}

.month-year[b-oweibt5fba] {
    font-weight: 700;
    font-size: 1.15rem;
    min-width: 8rem;
    text-align: center;
    color: black;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.year-selector[b-oweibt5fba] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 0.6rem;
    border-radius: 10px;
}

.year-selector button[b-oweibt5fba] {
    background: #ffffff;
    font-size: 0.95rem;
    cursor: pointer;
    color: #333;
    padding: 0.3rem 0.6rem;
    transition: all 0.3s ease;
    border-radius: 5px;
    font-weight: 600;
}

.year-selector button:hover[b-oweibt5fba] {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #333333 0%, #666666 100%);
    color: white;
    border-color: transparent;
}

.year-selector span[b-oweibt5fba] {
    font-weight: 700;
    font-size: 1rem;
    min-width: 4rem;
    text-align: center;
    color: #2c3e50;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.comparison-info[b-oweibt5fba] {
    text-align: center;
    padding: 1.25rem;
    border-radius: 10px;
    margin: 0.75rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.comparison-info p[b-oweibt5fba] {
    margin: 0;
    color: #37474f;
    font-weight: 600;
    font-size: 1rem;
}

.comparison-info .date-range[b-oweibt5fba] {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #546e7a;
    font-weight: 500;
}

.calendar-grid[b-oweibt5fba] {
    gap: 0.5rem;
}

.weekdays[b-oweibt5fba] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    border-radius: 8px;
}

.weekday[b-oweibt5fba] {
    text-align: center;
    font-size: 0.85rem;
    color: #546e7a;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.days[b-oweibt5fba] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
}

.day[b-oweibt5fba] {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    color: #37474f;
    user-select: none;
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.day:hover[b-oweibt5fba] {
    background: linear-gradient(135deg, #333333 0%, #666666 100%);
    color: white;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-color: transparent;
}

.day.selected[b-oweibt5fba] {
    background: linear-gradient(135deg, #333333 0%, #666666 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transform: scale(1.02);
    border-color: transparent;
}

.day.today[b-oweibt5fba] {
    background: linear-gradient(135deg, #333333 0%, #666666 100%);
    color: white;
    border: 2px solid #222;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.day.today[b-oweibt5fba]::after {
    content: '●';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 6px;
    color: inherit;
}

.day.in-range[b-oweibt5fba] {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.12) 100%);
    color: #2c3e50;
    border-color: rgba(0, 0, 0, 0.2);
}

.day.holiday[b-oweibt5fba]::before {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 5px;
    height: 5px;
    background: #d32f2f;
    border-radius: 50%;
    z-index: 1;
}

.day.disabled[b-oweibt5fba] {
    opacity: 0.4;
    color: #bdbdbd;
    pointer-events: auto;
    cursor: not-allowed;
    background: linear-gradient(145deg, #f5f5f5 0%, #eeeeee 100%);
    border-color: #e0e0e0;
}

.day.empty[b-oweibt5fba] {
    background: transparent;
    cursor: default;
    border: none;
    box-shadow: none;
}

.calendar-actions[b-oweibt5fba] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.apply-button[b-oweibt5fba], .cancel-button[b-oweibt5fba] {
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.7rem;
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.apply-button[b-oweibt5fba] {
    background: white;
    color: #333;
    border: 1px solid #ddd;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.apply-button:hover[b-oweibt5fba] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #333333 0%, #666666 100%);
    color: white;
    border-color: transparent;
}

.apply-button:disabled[b-oweibt5fba] {
    background: linear-gradient(135deg, #bdbdbd 0%, #9e9e9e 100%);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.cancel-button[b-oweibt5fba] {
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    color: #546e7a;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.cancel-button:hover[b-oweibt5fba] {
    background: linear-gradient(145deg, #f5f5f5 0%, #eeeeee 100%);
    color: #37474f;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.inline-year-selector[b-oweibt5fba] {
    display: none;
}

/* Mobile year selector styles - hidden by default */
.mobile-global-year-selector[b-oweibt5fba] {
    display: none;
}

/* Mobile Styles */
@media (max-width: 768px) {
    /* Enhanced mobile responsiveness for chip buttons */
    .bulk-select-bar[b-oweibt5fba] {
        flex-wrap: wrap;
        gap: 6px;
    }

    .chip-btn[b-oweibt5fba] {
        padding: 8px 12px;
        font-size: 12px;
        min-width: auto;
        flex: 1;
        max-width: calc(50% - 3px);
    }

    /* Mobile calendar styles */
    .calendar-container[b-oweibt5fba] {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        max-width: none !important;
    }

    .calendar-section[b-oweibt5fba] {
        width: 100% !important;
        margin: 0 !important;
        box-shadow: none;
        border: 1px solid #eee;
    }

    .calendar-grid[b-oweibt5fba] {
        margin: 0;
    }

    .month-year[b-oweibt5fba] {
        font-size: 13px;
    }

    .weekdays[b-oweibt5fba] {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
        margin-bottom: 0.25rem;
    }

    .days[b-oweibt5fba] {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
    }

    .comparison-info[b-oweibt5fba] {
        background: white;
        padding: 0.75rem;
        margin: 0.5rem 0;
        border: 1px solid #eee;
        border-radius: 4px;
    }

    .calendar-actions[b-oweibt5fba] {
        display: flex;
        gap: 0.5rem;
        justify-content: flex-end;
        margin-top: 1rem;
        padding: 0.5rem;
        background: white;
        border-top: 1px solid #eee;
    }

    /* Mobile year selector - show at top of each calendar */
    .mobile-global-year-selector[b-oweibt5fba] {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        margin-bottom: 0.5rem;
        padding: 0.5rem;
        background: #ffffff;
        border-radius: 4px;
    }

    .desktop-year-selector[b-oweibt5fba] {
        display: none !important;
    }

    .global-year-selector[b-oweibt5fba] {
        display: none !important;
    }

    .inline-year-selector[b-oweibt5fba] {
        display: none !important;
    }

    /* Flex the calendar-header row for mobile */
    .calendar-section > .calendar-header[b-oweibt5fba] {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

/* Desktop restore - show global year selector at bottom, hide mobile ones */
@media (min-width: 769px) {
    .mobile-global-year-selector[b-oweibt5fba] {
        display: none !important;
    }
    .global-year-selector[b-oweibt5fba] {
        display: flex !important;
    }
    .inline-year-selector[b-oweibt5fba] {
        display: none !important;
    }
}

/* Filter buttons */
.date-filter-btn[b-oweibt5fba] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px;
    border: 1px solid var(--lv-border-primary);
    border-radius: var(--lv-border-radius-small);
    background: linear-gradient(145deg, var(--lv-background-primary), var(--lv-hover-background));
    color: var(--lv-text-primary);
    font-size: var(--lv-font-size-base);
    font-weight: 600;
    cursor: pointer;
    min-width: 300px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
    will-change: transform, box-shadow;
}

.date-filter-btn:hover[b-oweibt5fba] {
    transform: translateY(-1px);
    background: linear-gradient(145deg, var(--lv-hover-background), var(--lv-background-secondary));
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Date and Market Filter Styles */
.date-filter-overlay[b-oweibt5fba] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

.date-filter-dropdown[b-oweibt5fba] {
    position: absolute;
    top: 100%;
    left: 0;
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.95),
        rgba(255, 255, 255, 0.85)
    );
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--lv-border-radius);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 10000;
    min-width: 220px;
    margin-top: 6px;
    overflow: hidden;
    animation: dropdownSlideIn-b-oweibt5fba 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dropdownSlideIn-b-oweibt5fba {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.95);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.date-filter-item[b-oweibt5fba] {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--lv-text-primary);
    display: flex;
    align-items: center;
    gap: calc(var(--lv-spacing-unit) * 0.75);
    font-size: calc(var(--lv-font-size-base) * 0.875);
    font-weight: 500;
    letter-spacing: 0.025em;
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
    border-radius: 0;
    margin: 0 2px;
    border-left: 2px solid transparent;
}

.date-filter-item:hover[b-oweibt5fba] {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.05),
        rgba(255, 255, 255, 0.02)
    );
    border-left-color: var(--lv-background-accent);
    color: var(--lv-background-accent);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.date-filter-item:active[b-oweibt5fba] {
    transform: translateX(2px) scale(0.98);
    transition-duration: 0.1s;
}

.date-filter-item:first-child[b-oweibt5fba] {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-top-left-radius: var(--lv-border-radius-small);
    border-top-right-radius: var(--lv-border-radius-small);
}

.date-filter-item:last-child[b-oweibt5fba] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom-left-radius: var(--lv-border-radius-small);
    border-bottom-right-radius: var(--lv-border-radius-small);
}

/* Add subtle glow effect on hover */
.date-filter-item:hover[b-oweibt5fba]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.03),
        rgba(255, 255, 255, 0.01)
    );
    border-radius: var(--lv-border-radius-small);
    z-index: -1;
    opacity: 0;
    animation: glowIn-b-oweibt5fba 0.3s ease-out forwards;
}

@keyframes glowIn-b-oweibt5fba {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Additional styles from razor file */
.date-filter-container[b-oweibt5fba] {
    position: relative;
    display: inline-block;
}

.date-filter-btn small[b-oweibt5fba] {
    color: var(--lv-text-secondary);
}

.date-filter-dropdown .custom-calendar[b-oweibt5fba] {
    min-width: 600px;
}

@media (max-width: 767px) {
    .date-filter-dropdown .custom-calendar[b-oweibt5fba] {
        min-width: auto;
    }
}

.bulk-select-bar[b-oweibt5fba] {
    display: flex;
    gap: .35rem;
    margin-bottom: .5rem;
}

.chip-btn[b-oweibt5fba] {
    border: 1px solid transparent;
    background: #f3f4f6;
    border-radius: 999px;
    padding: .25rem .65rem;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.chip-btn.active[b-oweibt5fba] {
    background: #111827;
    color: #fff;
}

.date-filter-item[b-oweibt5fba] {
    border: 1px solid transparent;
    border-radius: 6px;
    padding: .35rem .5rem;
    cursor: pointer;
}

.date-filter-item:hover[b-oweibt5fba] {
    background: #f9fafb;
    border-color: #e5e7eb;
}

.custom-calendar[b-oweibt5fba] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.calendar-container[b-oweibt5fba] {
    display: grid;
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    gap: 1rem;
}

.calendar-section[b-oweibt5fba] {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: .5rem;
}

.calendar-header[b-oweibt5fba] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.month-navigation[b-oweibt5fba] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.calendar-grid[b-oweibt5fba] {
    margin-top: .5rem;
}

.weekdays[b-oweibt5fba], .days[b-oweibt5fba] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .25rem;
}

.weekday[b-oweibt5fba] {
    text-align: center;
    font-size: 11px;
    color: #94a3b8;
}

.day[b-oweibt5fba] {
    text-align: center;
    padding: .3rem 0;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}

.day.today[b-oweibt5fba] {
    border: 1px solid #111827;
}

.day.disabled[b-oweibt5fba] {
    opacity: .45;
    pointer-events: none;
}

.calendar-actions[b-oweibt5fba] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

.cancel-button[b-oweibt5fba], .apply-button[b-oweibt5fba] {
    border: none;
    border-radius: 6px;
    padding: .35rem .75rem;
    font-size: 12px;
    cursor: pointer;
}

.cancel-button[b-oweibt5fba] {
    background: #f3f4f6;
}

.apply-button[b-oweibt5fba] {
    background: #111827;
    color: #fff;
}

.apply-button[disabled][b-oweibt5fba] {
    background: #cbd5f5;
    cursor: not-allowed;
}

.comparison-info[b-oweibt5fba] {
    font-size: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: .35rem .5rem;
}

.date-range[b-oweibt5fba] {
    margin: 0;
}

.global-year-selector[b-oweibt5fba] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.error-message[b-oweibt5fba] {
    color: #dc2626;
    margin: .5rem 0;
    font-size: 0.8rem;
    padding: .25rem .5rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
}

.day.holiday[b-oweibt5fba] {
    position: relative;
}

.day.holiday[b-oweibt5fba]::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 4px;
    height: 4px;
    background: #ef4444;
    border-radius: 50%;
}

.day.empty[b-oweibt5fba] {
    visibility: hidden;
}

h4[b-oweibt5fba] {
    margin: 0 0 .5rem 0;
    font-size: 13px;
    font-weight: 600;
}

.month-year[b-oweibt5fba] {
    font-weight: 600;
    font-size: 13px;
}

.tab-content[b-oweibt5fba] {
    max-height: 600px;
    overflow-y: auto;
}

.custom-calendar[b-oweibt5fba] {
    max-width: 100%;
}

@media (max-width: 767px) {
    .calendar-container[b-oweibt5fba] {
        grid-template-columns: 1fr;
    }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .date-filter-btn[b-oweibt5fba] {
        width: 100%;
        max-width: 250px;
    }

    .date-filter-dropdown[b-oweibt5fba] {
        min-width: 200px;
        left: 0;
        right: 0;
        width: auto;
    }
}
/* /Layout/BusinessPlanLayout.razor.rz.scp.css */
.bp-root[b-1splpnf1e3] {
  --bp-bg: #0b0f14;
  --bp-card: #121823;
  --bp-surface: #0f141b;
  --bp-text: #e6edf3;
  --bp-muted: #9fb0c3;
  --bp-primary: #7c9cff;
  --bp-primary-700: #6486ff;
  --bp-accent: #22d3ee;
  --bp-border: #203040;
  --bp-shadow: 0 10px 30px rgba(0,0,0,.5);
  background: radial-gradient(1200px 800px at 80% -200px, rgba(124,156,255,.25), transparent),
              radial-gradient(1200px 800px at -10% -300px, rgba(34,211,238,.15), transparent),
              var(--bp-bg);
  color: var(--bp-text);
  min-height: 100vh;
}

.bp-header[b-1splpnf1e3] {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(15,20,27,.9), rgba(15,20,27,.7));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--bp-border);
}

.bp-nav[b-1splpnf1e3] {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
}

.bp-brand[b-1splpnf1e3] {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.bp-logo[b-1splpnf1e3] {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, var(--bp-primary), var(--bp-accent));
  color: #0b0f14;
  border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(124,156,255,.3), 0 8px 20px rgba(124,156,255,.2);
}

.bp-brand-text[b-1splpnf1e3] {
  letter-spacing: .3px;
}

.bp-menu-toggle[b-1splpnf1e3] {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--bp-border);
  border-radius: 8px;
  padding: 8px;
}
.bp-menu-toggle span[b-1splpnf1e3] {
  width: 20px;
  height: 2px;
  background: var(--bp-text);
  display: block;
}

.bp-links[b-1splpnf1e3] {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bp-links a[b-1splpnf1e3] {
  color: var(--bp-muted);
  text-decoration: none;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.bp-links a:hover[b-1splpnf1e3] {
  color: var(--bp-text);
  background: rgba(124,156,255,.08);
  transform: translateY(-1px);
}
.bp-links a.active[b-1splpnf1e3] {
  color: var(--bp-text);
  background: linear-gradient(180deg, rgba(124,156,255,.18), rgba(124,156,255,.06));
  box-shadow: inset 0 0 0 1px rgba(124,156,255,.25);
}

.bp-main[b-1splpnf1e3] {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px 80px;
}

.bp-footer[b-1splpnf1e3] {
  border-top: 1px solid var(--bp-border);
  background: var(--bp-surface);
}
.bp-footer .bp-container[b-1splpnf1e3] {
  max-width: 1200px;
  padding: 24px 20px;
  margin: 0 auto;
  color: var(--bp-muted);
  font-size: 14px;
}

@media (max-width: 900px) {
  .bp-menu-toggle[b-1splpnf1e3] { display: flex; }
  .bp-links[b-1splpnf1e3] {
    position: absolute;
    right: 20px;
    top: 64px;
    flex-direction: column;
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: 12px;
    padding: 10px;
    width: min(260px, 86vw);
    max-height: 70vh;
    overflow: auto;
    display: none;
    box-shadow: var(--bp-shadow);
  }
  .bp-links.open[b-1splpnf1e3] { display: flex; }
}

/* /Layout/CustomerProfileLoadingPlaceholder.razor.rz.scp.css */
/* Simple shimmer animation */
@keyframes simple-shimmer-b-fikbikx96l {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.loading-skeleton[b-fikbikx96l] {
    border-radius: 4px;
    display: inline-block;
    background-color: #e2e2e2;
    position: relative;
    overflow: hidden;
}

.loading-skeleton.simple-shimmer[b-fikbikx96l] {
    background: linear-gradient(
        90deg,
        #e2e2e2 0%,
        #f0f0f0 50%,
        #e2e2e2 100%
    );
    background-size: 200% 100%;
    animation: simple-shimmer-b-fikbikx96l 2.5s ease-in-out infinite;
}

/* Circular version */
.loading-skeleton-circle[b-fikbikx96l] {
    border-radius: 50%;
}

/* For controlling widths/heights consistently */
.skeleton-line-sm[b-fikbikx96l] {
    width: 70px;
    height: 1em;
    margin-bottom: 0.3rem;
}

.skeleton-line-md[b-fikbikx96l] {
    width: 120px;
    height: 1em;
    margin-bottom: 0.3rem;
}

.skeleton-line-lg[b-fikbikx96l] {
    width: 180px;
    height: 1em;
    margin-bottom: 0.3rem;
}

.skeleton-line-xl[b-fikbikx96l] {
    width: 250px;
    height: 1em;
    margin-bottom: 0.3rem;
}

/* Hero Header Skeleton Styles */
.profile-container[b-fikbikx96l] {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

.hero-header-skeleton[b-fikbikx96l] {
    position: relative;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 2rem;
    margin: 0 2rem;
    border-radius: 16px;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    min-height: 200px;
}

.hero-content-skeleton[b-fikbikx96l] {
    display: flex;
    align-items: center;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.customer-avatar-skeleton[b-fikbikx96l] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.customer-info-skeleton[b-fikbikx96l] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.contact-skeleton[b-fikbikx96l] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.level-badge-skeleton[b-fikbikx96l] {
    position: absolute;
    top: 2rem;
    right: 2rem;
    z-index: 10;
}

/* Mobile responsiveness for skeleton */
@media (max-width: 768px) {
    .hero-header-skeleton[b-fikbikx96l] {
        margin: 0 1rem;
        padding: 1.5rem;
    }
    
    .hero-content-skeleton[b-fikbikx96l] {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
    
    .level-badge-skeleton[b-fikbikx96l] {
        position: static;
        margin-top: 1rem;
        text-align: center;
    }
    
    .customer-info-skeleton[b-fikbikx96l] {
        align-items: center;
    }
    
    .contact-skeleton[b-fikbikx96l] {
        align-items: center;
    }
}

/* Main Content Grid Skeleton */
.content-grid-skeleton[b-fikbikx96l] {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    margin: 2rem;
    padding-top: 1rem;
}

.main-column-skeleton[b-fikbikx96l] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.sidebar-column-skeleton[b-fikbikx96l] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Card Skeletons */
.data-card-skeleton[b-fikbikx96l],
.stats-card-skeleton[b-fikbikx96l],
.list-card-skeleton[b-fikbikx96l] {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.card-header-skeleton[b-fikbikx96l] {
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    background: linear-gradient(135deg, #f9fafb, #ffffff);
    border-bottom: 1px solid #e5e7eb;
}

.card-content-skeleton[b-fikbikx96l] {
    padding: 1.5rem;
}

/* Detail Grid Skeleton */
.detail-grid-skeleton[b-fikbikx96l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.detail-section-skeleton[b-fikbikx96l] {
    display: flex;
    flex-direction: column;
}

/* Stats Skeleton */
.stat-item-skeleton[b-fikbikx96l] {
    text-align: center;
    padding: 1rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.stat-item-skeleton:last-child[b-fikbikx96l] {
    border-bottom: none;
}

/* List Skeleton */
.item-list-skeleton[b-fikbikx96l] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* Mobile responsiveness for content skeleton */
@media (max-width: 1024px) {
    .content-grid-skeleton[b-fikbikx96l] {
        grid-template-columns: 1fr;
        margin: 1rem;
    }
    
    .sidebar-column-skeleton[b-fikbikx96l] {
        order: -1;
    }
}

@media (max-width: 768px) {
    .content-grid-skeleton[b-fikbikx96l] {
        gap: 1rem;
        margin: 0.5rem;
    }
    
    .detail-grid-skeleton[b-fikbikx96l] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .card-header-skeleton[b-fikbikx96l],
    .card-content-skeleton[b-fikbikx96l] {
        padding: 1rem;
    }
}
/* /Layout/EmptyLayout.razor.rz.scp.css */
.empty-layout[b-xin7pqwpqm] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: Arial, sans-serif;
    color: #fff;
    background-color: #000;
    overflow: hidden;
}

/* Animated background grid */
.empty-layout[b-xin7pqwpqm]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.12;
    mask-image: radial-gradient(ellipse at center, black, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 70%);
    pointer-events: none;
}

/* Animated gradient orbs */
@keyframes float-slow-b-xin7pqwpqm {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(30px, -30px) rotate(120deg);
    }
    66% {
        transform: translate(-20px, 20px) rotate(240deg);
    }
}

@keyframes float-rev-b-xin7pqwpqm {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(-30px, -30px) rotate(-120deg);
    }
    66% {
        transform: translate(20px, 20px) rotate(-240deg);
    }
}

@keyframes gradient-slow-b-xin7pqwpqm {
    0%, 100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(-10px, -10px);
    }
}

.empty-layout .animated-orb-1[b-xin7pqwpqm] {
    position: absolute;
    top: -10rem;
    left: -10rem;
    width: 24rem;
    height: 24rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgb(255 255 255 / 20%), rgb(255 255 255 / 17%), rgb(255 255 255 / 0%));
    filter: blur(3rem);
    animation: float-slow-b-xin7pqwpqm 20s ease-in-out infinite;
    pointer-events: none;
}

.empty-layout .animated-orb-2[b-xin7pqwpqm] {
    position: absolute;
    bottom: -10rem;
    right: -10rem;
    width: 28rem;
    height: 28rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgb(255 255 255 / 20%), rgb(255 255 255 / 17%), rgb(255 255 255 / 0%));
    filter: blur(3rem);
    animation: float-rev-b-xin7pqwpqm 25s ease-in-out infinite;
    pointer-events: none;
}

/* Subtle moving gradient wash */
.empty-layout .gradient-wash[b-xin7pqwpqm] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1000px 600px at 10% 10%, rgba(99, 102, 241, 0.08), transparent),
        radial-gradient(800px 500px at 90% 80%, rgba(14, 165, 233, 0.08), transparent);
    animation: gradient-slow-b-xin7pqwpqm 30s ease-in-out infinite;
    pointer-events: none;
}

/* Content container */
.empty-layout .content[b-xin7pqwpqm] {
    position: relative;
    z-index: 10;
    margin-bottom: 3rem;
}
/* /Layout/HomePagePlaceHolder.razor.rz.scp.css */
/* Base Placeholder Styles */
.placeholder[b-1a34cle6rg] {
    background-color: #e0e0e0;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

    .placeholder[b-1a34cle6rg]::after {
        content: '';
        position: absolute;
        top: 0;
        left: -150px;
        width: 150px;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        animation: loading-b-1a34cle6rg 1.5s infinite;
    }

/* Keyframe Animation for Shimmering Effect */
@keyframes loading-b-1a34cle6rg {
    0% {
        left: -150px;
    }

    50% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

/* Specific Placeholder Element Sizes */
.placeholder-title[b-1a34cle6rg] {
    width: 60%;
    height: 20px;
    margin-bottom: 10px;
}

.placeholder-value[b-1a34cle6rg] {
    width: 80%;
    height: 30px;
    margin-bottom: 10px;
}

.placeholder-comparison[b-1a34cle6rg] {
    width: 50%;
    height: 20px;
    margin-bottom: 10px;
}

.placeholder-divider[b-1a34cle6rg] {
    width: 100%;
    height: 2px;
    margin-bottom: 10px;
}

.placeholder-customer-number[b-1a34cle6rg] {
    width: 40%;
    height: 20px;
    margin-bottom: 10px;
}

.chart-section[b-1a34cle6rg] {
    margin-top: 20px;
}

.placeholder-chart-header[b-1a34cle6rg] {
    width: 50%;
    height: 25px;
    margin-bottom: 10px;
}

.placeholder-canvas[b-1a34cle6rg] {
    width: 100%;
    height: 250px;
}

/* Layout Styles */
.loading-container[b-1a34cle6rg] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

.stats-cards[b-1a34cle6rg] {
    display: flex;
    gap: 20px;
}

.flip-card.placeholder[b-1a34cle6rg] {
    background-color: #f0f0f0;
    width: 300px;
    height: 200px;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* /Layout/LoginPage.razor.rz.scp.css */
/* Loading spinner */
.spinner[b-ugovlf37l3] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid #fff;
    border-radius: 50%;
    animation: spin-b-ugovlf37l3 1s linear infinite;
}

@keyframes spin-b-ugovlf37l3 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-to8qlfj7je] {
    position: relative;
    display: flex;
    flex-direction: column;
    background-image: radial-gradient(circle, rgba(255, 105, 180, 0.2) 1px, rgba(211, 211, 211, 0.2) 1px);
    background-repeat: repeat;
    background-size: 20px 20px;
    background-position: center;
    background-color: rgb(245 245 245 / 94%);
    color: black;
    overflow: hidden;
}

main[b-to8qlfj7je] {
    margin-top: 10rem;
    flex: 1;
    min-height: calc(100dvh - 10rem);
    color: black;
    overflow-y: auto;
    margin-left: 220px;
    z-index: 1;
}


.top-row[b-to8qlfj7je]  a, .top-row[b-to8qlfj7je]  .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
}

    .top-row[b-to8qlfj7je]  a:hover, .top-row[b-to8qlfj7je]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-to8qlfj7je]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-to8qlfj7je] {
        justify-content: space-between;
    }

        .top-row[b-to8qlfj7je]  a, .top-row[b-to8qlfj7je]  .btn-link {
            margin-left: 0;
        }

    .page[b-to8qlfj7je] {
        position: relative;
        display: flex;
        flex-direction: column;
        margin-top: 7rem;
        flex-direction: row;
        overflow: hidden;
    }

    main[b-to8qlfj7je] {
        background-color: #f8f8f8;
        flex: 1;
        min-height: 100dvh;
        overflow-y: auto;
        margin: 0;
        color: black;
    }
}

@media (min-width: 641px) {
    .page[b-to8qlfj7je] {
        flex-direction: row;
    }

    .sidebar[b-to8qlfj7je] {
        z-index: 6000;
        border-radius: 6px;
        height: 100vh;
        position: fixed;
        color: black;
    }

    .top-row[b-to8qlfj7je] {
        position: fixed;
        top: 0;
        z-index: 1;
    }

        .top-row.auth[b-to8qlfj7je]  a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }

    .top-row[b-to8qlfj7je], article[b-to8qlfj7je] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* Modern Navbar Styling with Better Fonts */
.navbar-toggler[b-wi7pymtpyd] {
    background-color: #000;
    border: none;
    outline: none;
}

.navbar-dark .navbar-toggler[b-wi7pymtpyd] {
    border-color: #000 !important;
    color: #fff !important;
    left: 0.8rem !important;
    position: fixed !important;
    z-index: 1000 !important;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-dark .navbar-toggler:hover[b-wi7pymtpyd] {
    background-color: #1a1a1a;
    transform: scale(1.05);
}

.top-row[b-wi7pymtpyd] {
    height: 70px;
    background: #000;
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/*Mobile Filter Menu*/
/* General navbar container settings */
.navbar-container[b-wi7pymtpyd] {
    position: relative;
    overflow: visible; /* Allow dropdowns to extend outside */
}

@media (max-width: 640px) {
    .top-row[b-wi7pymtpyd] {
        height: 5rem !important; 
        position: fixed !important;
        z-index: 100 !important;
        width: 100% !important;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #000;
    }

    .flex-column[b-wi7pymtpyd] {
        flex-direction: column !important;
        position: fixed;
        z-index: 3000;
        background: #000;
        height: calc(100vh);
        top: 0;
        width: 200px; /* Reduced from 220px */
        transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.8);
        overflow-x: visible; /* Allow dropdowns to extend outside */
        overflow-y: hidden; /* Prevent vertical overflow on container */
    }

    .flex-column nav[b-wi7pymtpyd] {
        height: calc(100vh - 4rem - 60px); /* Mobile height minus top bar and currency area */
        overflow-y: auto; /* Scroll when content exceeds available space */
        overflow-x: visible; /* Allow dropdowns to extend horizontally for proper positioning */
        padding: 1rem 0 15px 0; /* Increased top padding for better spacing */
        position: relative; /* Ensure dropdowns position correctly within nav */
        /* Ensure scroll works on very small screens */
        min-height: 150px; /* Minimum height for scroll area */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }

    .flex-column nav[b-wi7pymtpyd]::-webkit-scrollbar {
        width: 6px;
    }

    .flex-column nav[b-wi7pymtpyd]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
    }

    .flex-column nav[b-wi7pymtpyd]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 3px;
    }

    .flex-column nav[b-wi7pymtpyd]::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.3);
    }

    /* Ensure scrolling works on all mobile devices */
    .flex-column nav[b-wi7pymtpyd] {
        scroll-behavior: smooth;
    }

    /* Force scrollbar visibility on mobile when needed */
    .flex-column nav[b-wi7pymtpyd]::-webkit-scrollbar {
        width: 6px; /* Keep compact for mobile */
        background: transparent;
    }

    .flex-column nav[b-wi7pymtpyd]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3); /* More visible on mobile */
        border-radius: 3px;
        min-height: 30px; /* Reduced thumb size for mobile */
    }

    /* Backdrop overlay */
    .backdrop[b-wi7pymtpyd] {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 999;
        backdrop-filter: blur(4px);
        transition: opacity 0.3s ease;
    }

    .navbar-container.show-overlay .backdrop[b-wi7pymtpyd] {
        display: block;
    }
}

.btn-manage[b-wi7pymtpyd] {
    display: block;
    padding: 10px 16px;
    margin-top: 10px;
    text-align: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-manage:hover[b-wi7pymtpyd] {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    transform: translateY(-1px);
}

button.icon-user[b-wi7pymtpyd] {
    display: none;
    background: #1a1a1a;
    color: #fff;
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Inter', sans-serif;
}

@media (max-width: 768px) {
    button.icon-user[b-wi7pymtpyd] {
        display: inline-block;
        background: #000;
    }

    button.icon-user:hover[b-wi7pymtpyd] {
        background: #2a2a2a;
        transform: scale(1.05);
    }
}

.navbar-brand[b-wi7pymtpyd] {
    font-size: 1.2rem;
    margin: 0 auto;
    text-align: center;
    flex: 1;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.icon-heart[b-wi7pymtpyd] {
    width: 32px;
    height: 26px;
}

.navbar-brand:hover[b-wi7pymtpyd] {
    color: #f0f0f0;
    transform: scale(1.02);
}

.bi[b-wi7pymtpyd] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-wi7pymtpyd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-wi7pymtpyd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-wi7pymtpyd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-wi7pymtpyd] {
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    padding-bottom: 0.25rem;
    background-color: transparent;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-item svg[b-wi7pymtpyd] {
    margin-right: 12px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.nav-item:first-of-type[b-wi7pymtpyd] {
    padding-top: 2rem; /* Reduced since nav container now has 1rem top padding */
}

.nav-item[b-wi7pymtpyd]  a {
    background-color: transparent;
    color: #d0d0d0;
    border-radius: 8px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
    border: none;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    padding: 0 8px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

    .nav-item[b-wi7pymtpyd]  a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 4px;
        background: linear-gradient(180deg, #F44336 0%, #f3f3f3c2 100%);
        border-radius: 0 2px 2px 0;
        transform: scaleY(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

.nav-item[b-wi7pymtpyd]  a.active::before {
    transform: scaleY(1);
}

.nav-item[b-wi7pymtpyd]  a.active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #fff;
    font-weight: 600;
    transform: translateX(4px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
}

.nav-item[b-wi7pymtpyd]  a:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.05) 100%);
    color: #fff;
    transform: translateX(2px);
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.05);
}

@media (min-width: 641px) {
    .navbar-toggler[b-wi7pymtpyd] {
        display: none;
    }

    .collapse[b-wi7pymtpyd] {
        display: block;
    }

    .nav-scrollable[b-wi7pymtpyd] {
        width: 220px;
        height: calc(100vh - 70px);
        background: #000;
        transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 15px rgba(0, 0, 0, 0.5);
        border-right: 1px solid #1a1a1a;
        position: relative;
        overflow: hidden;
    }

    .nav-scrollable[b-wi7pymtpyd]::-webkit-scrollbar {
        width: 6px;
    }

    .nav-scrollable[b-wi7pymtpyd]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
    }

    .nav-scrollable[b-wi7pymtpyd]::-webkit-scrollbar-thumb {
        background: #9ca3af;
        border-radius: 3px;
    }

    .nav-scrollable[b-wi7pymtpyd]::-webkit-scrollbar-thumb:hover {
        background: #9ca3af;
    }

    .nav-scrollable nav[b-wi7pymtpyd] {
        height: calc(100vh - 70px - 80px); /* Full height minus top bar minus currency area (80px) */
        overflow-y: auto; /* Scroll when content exceeds available space */
        overflow-x: visible; /* Allow dropdowns to extend horizontally for proper positioning */
        padding-bottom: 20px; /* Extra padding to ensure last items are accessible */
        /* Ensure scroll works on all screen sizes */
        min-height: 200px; /* Minimum height to ensure scroll area exists */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }

    .nav-scrollable nav[b-wi7pymtpyd]::-webkit-scrollbar {
        width: 8px !important;
    }

    .nav-scrollable nav[b-wi7pymtpyd]::-webkit-scrollbar-track {
        background: #0b0e13 !important;
        border-radius: 4px !important;
    }

    .nav-scrollable nav[b-wi7pymtpyd]::-webkit-scrollbar-thumb {
        background: #9ca3af !important;
        border-radius: 4px !important;
        border: none !important;
    }

    .nav-scrollable nav[b-wi7pymtpyd]::-webkit-scrollbar-thumb:hover {
        background: #9ca3af !important;
        box-shadow: none !important;
    }
}

.replacement-image[b-wi7pymtpyd] {
    display: none;
}

@media (max-width: 640px) {
    .replacement-image[b-wi7pymtpyd] {
        display: inline-block;
        filter: invert(1);
        height: 3rem; /* Reduced from 4.2rem */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: auto;
        image-rendering: auto;
        backface-visibility: hidden;
        transition: all 0.3s ease;
    }

    .replacement-image:hover[b-wi7pymtpyd] {
        transform: translate(-50%, -50%) scale(1.02);
    }

    svg.lucide.lucide-heart[b-wi7pymtpyd] {
        display: none;
    }

    .icon-heart[b-wi7pymtpyd] {
        display: none;
    }
}

/* Modern Dropdown System */
.customer-menu[b-wi7pymtpyd], .live-data-menu[b-wi7pymtpyd], .activecampaign-menu[b-wi7pymtpyd] {
    position: relative;
    color: #d0d0d0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Inter', sans-serif;
    margin-bottom: 0.5rem; /* Increased spacing between sections */
}

.customer-menu.active[b-wi7pymtpyd], .live-data-menu.active[b-wi7pymtpyd], .activecampaign-menu.active[b-wi7pymtpyd] {
    color: #fff;
}

.customer-menu:hover[b-wi7pymtpyd], .live-data-menu:hover[b-wi7pymtpyd], .activecampaign-menu:hover[b-wi7pymtpyd] {
    color: #fff;
}

/* Active state for dropdown parents */
.customer-menu.active .customer-toggle[b-wi7pymtpyd],
.live-data-menu.active .live-data-toggle[b-wi7pymtpyd],
.activecampaign-menu.active .activecampaign-toggle[b-wi7pymtpyd] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #fff;
    font-weight: 600;
    transform: translateX(4px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
    position: relative;
}

    .customer-menu.active .customer-toggle[b-wi7pymtpyd]::before,
    .live-data-menu.active .live-data-toggle[b-wi7pymtpyd]::before,
    .activecampaign-menu.active .activecampaign-toggle[b-wi7pymtpyd]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 4px;
        background: linear-gradient(180deg, #F44336 0%, #f3f3f3c2 100%);
        border-radius: 0 2px 2px 0;
    }

/* Toggle Button Styling */
.customer-toggle[b-wi7pymtpyd], .live-data-toggle[b-wi7pymtpyd], .activecampaign-toggle[b-wi7pymtpyd] {
    height: 3rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    padding: 0 16px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    letter-spacing: -0.01em;
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.customer-toggle:hover[b-wi7pymtpyd], .live-data-toggle:hover[b-wi7pymtpyd], .activecampaign-toggle:hover[b-wi7pymtpyd] {
    color: #fff;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.05) 100%);
    transform: translateX(2px);
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.05);
}

/* Icon and Text Container */
.customer-icon-text[b-wi7pymtpyd], .live-data-icon-text[b-wi7pymtpyd], .activecampaign-icon-text[b-wi7pymtpyd] {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.customer-icon-text svg[b-wi7pymtpyd], .live-data-icon-text svg[b-wi7pymtpyd], .activecampaign-icon-text svg[b-wi7pymtpyd] {
    transition: all 0.3s ease;
    margin-right: 12px;
    flex-shrink: 0;
}

.customer-toggle:hover .customer-icon-text svg[b-wi7pymtpyd],
.live-data-toggle:hover .live-data-icon-text svg[b-wi7pymtpyd],
.activecampaign-toggle:hover .activecampaign-icon-text svg[b-wi7pymtpyd] {
    transform: scale(1.05);
}

/* Modern Dropdown Arrow - Fixed positioning */
.dropdown-arrow[b-wi7pymtpyd][b-wi7pymtpyd] {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    /* align-items: center; */
    /* justify-content: center; */
    padding: 4px;
    border-radius: 4px;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-left: 20px;
    margin-right: -5px;
    position: relative;
}

.dropdown-arrow.open[b-wi7pymtpyd] {
    transform: rotate(180deg);
}

.dropdown-arrow svg[b-wi7pymtpyd] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Modern Dropdown Menu with Fade-in Effects */
.modern-dropdown[b-wi7pymtpyd] {
    list-style: none;
    padding: 0;
    margin: 4px 0 8px 20px;
    /*  background: rgba(255, 255, 255, 0.05); */
    /*  border-radius: 8px; */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    /*  border: 1px solid rgba(255, 255, 255, 0.1); */
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    animation: dropdownFadeIn-b-wi7pymtpyd 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    position: relative;
    /* Remove height and overflow restrictions - let nav area handle scrolling */
}

@keyframes dropdownFadeIn-b-wi7pymtpyd {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes currencyDropdownFadeIn-b-wi7pymtpyd {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modern-dropdown li[b-wi7pymtpyd] {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 6px;
    margin: 2px 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-dropdown li:hover[b-wi7pymtpyd] {
    transform: translateX(2px);
}

.modern-dropdown li a[b-wi7pymtpyd] {
    color: #d0d0d0 !important;
    padding: 10px 12px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 6px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    position: relative !important;
    overflow: hidden !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    width: calc(100% - 24px) !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    height: auto !important;
    line-height: normal !important;
}

.modern-dropdown li a:hover[b-wi7pymtpyd] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.05) 100%) !important;
    color: #fff !important;
    transform: none !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1) !important;
}

.modern-dropdown li a.active[b-wi7pymtpyd] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2) !important;
}

.modern-dropdown li a.active[b-wi7pymtpyd]::before {
    display: none !important;
}

/* Additional specificity for custom active links */
    .customer-dropdown li a.active[b-wi7pymtpyd], .live-data-dropdown li a.active[b-wi7pymtpyd], .activecampaign-dropdown li a.active[b-wi7pymtpyd] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2) !important;
}

/* Handle NavLink with custom active class */
.modern-dropdown li .active[b-wi7pymtpyd] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2) !important;
}

/* More specific rule for NavLink with force-active - this should override default active */
.customer-dropdown li a.force-active[b-wi7pymtpyd],
.live-data-dropdown li a.force-active[b-wi7pymtpyd],
.activecampaign-dropdown li a.force-active[b-wi7pymtpyd],
.modern-dropdown li a.force-active[b-wi7pymtpyd] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2) !important;
}

/* Ensure force-active overrides any default NavLink active state */
.modern-dropdown li .force-active[b-wi7pymtpyd],
.modern-dropdown li a.force-active[b-wi7pymtpyd] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2) !important;
}

/* Mobile Specific Dropdown Styling */
@media (max-width: 640px) {
    .modern-dropdown[b-wi7pymtpyd] {
        margin: 4px 12px 12px 12px; /* Increased bottom margin for better spacing */
        background: rgba(255, 255, 255, 0.00);
        border-radius: 6px;
        /* Remove z-index and height restrictions - let it be contained within nav scroll area */
        /* Ensure dropdown content is fully accessible */
        min-height: auto;
        max-height: none; /* Remove height restrictions for small screens */
    }

    .modern-dropdown li[b-wi7pymtpyd] {
        margin: 2px 4px;
    }

    .modern-dropdown li a[b-wi7pymtpyd] {
        padding: 10px 12px !important; /* Increased padding for better touch targets */
        font-size: 13px !important;
        width: calc(100% - 16px) !important;
        min-height: 36px !important; /* Minimum height for touch accessibility */
        display: flex !important;
        align-items: center !important;
    }

    .nav-item[b-wi7pymtpyd] {
        background-color: transparent;
        margin: 0;
        padding: 0;
        font-size: 12px; /* Reduced from 13px */
        position: relative; /* Ensure dropdowns position correctly */
    }

    .nav-item[b-wi7pymtpyd]  a {
        height: 2rem; /* Increased back from 2.2rem for better touch */
        font-size: 12px; /* Keep compact but readable */
        padding: 0 14px; /* Increased from 12px for better spacing */
        margin-bottom: 6px; /* Add small spacing between items */
    }

    /* Mobile dropdown menu positioning - keep within nav bounds */
    .customer-menu[b-wi7pymtpyd], .live-data-menu[b-wi7pymtpyd], .activecampaign-menu[b-wi7pymtpyd] {
        position: relative;
        /* Remove z-index to prevent overlaying currency */
    }

    /* Mobile dropdown positioning - contained within navigation */
    .customer-dropdown[b-wi7pymtpyd], .live-data-dropdown[b-wi7pymtpyd], .activecampaign-dropdown[b-wi7pymtpyd] {
        position: relative;
        /* Remove z-index to prevent overlaying currency */
    }

    /* Ensure mobile toggle buttons work properly */
    .customer-toggle[b-wi7pymtpyd], .live-data-toggle[b-wi7pymtpyd], .activecampaign-toggle[b-wi7pymtpyd] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        padding: 0 14px; /* Increased from 12px for better spacing */
        height: 2.2rem; /* Increased from 2.2rem for better touch */
        width: 100%;
        box-sizing: border-box;
        font-size: 12px; /* Keep readable size */
        margin-bottom: 6px; /* Add spacing between sections */
    }

    /* Ensure dropdown arrows are visible on mobile */
    .dropdown-arrow[b-wi7pymtpyd] {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Mobile icon sizing - make icons smaller */
    .nav-item svg[b-wi7pymtpyd] {
        width: 18px !important; /* Reduced from 24px */
        height: 18px !important; /* Reduced from 24px */
        margin-right: 8px !important; /* Reduced from 12px */
    }

    .customer-icon-text svg[b-wi7pymtpyd], .live-data-icon-text svg[b-wi7pymtpyd], .activecampaign-icon-text svg[b-wi7pymtpyd] {
        width: 16px !important; /* Smaller for toggle buttons */
        height: 16px !important; /* Smaller for toggle buttons */
        margin-right: 8px !important; /* Reduced margin */
    }

    /* Mobile dropdown item sizing */
    .modern-dropdown li a[b-wi7pymtpyd] {
        padding: 10px 12px !important; /* Increased for better touch */
        font-size: 12px !important; /* Increased for better readability */
        min-height: 36px !important; /* Increased for better touch targets */
        margin-bottom: 1px; /* Add small spacing between dropdown items */
    }

    .modern-dropdown[b-wi7pymtpyd] {
        margin: 4px 12px 10px 12px; /* Increased margins for better spacing */
    }

    .modern-dropdown li[b-wi7pymtpyd] {
        margin: 2px 4px; /* Increased margins between items */
    }
}

/* Short screens (any width) - ensure all content is accessible */
@media (max-height: 600px) {
    .nav-scrollable nav[b-wi7pymtpyd] {
        padding-bottom: 40px !important; /* Extra padding for short screens */
    }

    .flex-column nav[b-wi7pymtpyd] {
        padding-bottom: 40px !important; /* Extra padding for short mobile screens */
    }
}


/* Currency Dropdown Styling - Fixed at bottom of viewport */
.currency-nav-item[b-wi7pymtpyd] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000;
    padding: 10px;
    z-index: 1000; /* Stays above navigation content but nav dropdowns won't override */
    box-sizing: border-box;
}

/* Ensure currency stays fixed in all viewports */
@media (min-width: 641px) {
    .currency-nav-item[b-wi7pymtpyd] {
        position: absolute;
        bottom: 0;
        width: 220px;
    }
}

.custom-dropdown[b-wi7pymtpyd] {
    position: relative;
    font-family: 'Inter', sans-serif;
}

.custom-dropdown-selected[b-wi7pymtpyd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-weight: 500;
}

.custom-dropdown-selected:hover[b-wi7pymtpyd] {
    background: rgba(255, 255, 255, 0.08);
}

.custom-dropdown-menu[b-wi7pymtpyd] {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: rgba(30, 30, 30, 0.95);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    list-style: none;
    padding: 6px 0;
    margin: 0 0 8px 0;
    opacity: 0;
    transform: translateY(10px) scale(0.95); /* Start from below for upward dropdown */
    animation: currencyDropdownFadeIn-b-wi7pymtpyd 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    z-index: 1001; /* Ensure it appears above everything */
    max-height: 200px; /* Prevent overflow */
    overflow-y: auto;
}

.custom-dropdown-menu li[b-wi7pymtpyd] {
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #d0d0d0;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.custom-dropdown-menu li:hover[b-wi7pymtpyd] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.round-flag[b-wi7pymtpyd] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.round-flag:hover[b-wi7pymtpyd] {
    transform: scale(1.05);
}

/* User Dropdown Menu - Keep original styling */
.user-dropdown-menu[b-wi7pymtpyd] {
    position: absolute;
    top: 100%;
    right: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 16px;
    min-width: 200px;
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    font-family: 'Inter', sans-serif;
}

.user-dropdown-menu.show[b-wi7pymtpyd] {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.user-dropdown-menu p[b-wi7pymtpyd] {
    margin: 0 0 12px 0;
    color: #333;
    font-weight: 500;
    font-size: 14px;
}

.user-dropdown-menu hr[b-wi7pymtpyd] {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: 12px 0;
}

.btn-signout:hover[b-wi7pymtpyd] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

/* Mobile specific nav adjustments */
@media (max-width: 640px) {
    .currency-nav-item[b-wi7pymtpyd] {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 200px; /* Match reduced nav width */
        background: #000;
        padding: 8px; /* Reduced from 10px */
        z-index: 1000; /* Currency stays visible, nav content scrolls underneath */
        box-sizing: border-box;
    }
    
    .custom-dropdown-menu[b-wi7pymtpyd] {
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        margin-bottom: 8px;
    }
}
/* /Layout/SalesPageLoadingPlaceholder.razor.rz.scp.css */


/* General Placeholder Styles */
.placeholder[b-u8kkvmquoi] {
    background-color: #e0e0e0;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

    .placeholder[b-u8kkvmquoi]::after {
        content: '';
        position: absolute;
        top: 0;
        left: -150px;
        width: 150px;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        animation: loading-b-u8kkvmquoi 1.5s infinite;
    }

@keyframes loading-b-u8kkvmquoi {
    0% {
        left: -150px;
    }

    50% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

/* Sales Card Placeholder */
.sales-card.placeholder[b-u8kkvmquoi] {
    padding: 20px;
    margin-bottom: 20px;
}

.placeholder-header[b-u8kkvmquoi] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.placeholder-title[b-u8kkvmquoi],
.placeholder-value[b-u8kkvmquoi] {
    height: 20px;
    width: 50%;
}

.placeholder-percentage[b-u8kkvmquoi] {
    height: 15px;
    width: 30%;
    margin-bottom: 20px;
}

.sales-list li[b-u8kkvmquoi] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.placeholder-flag[b-u8kkvmquoi] {
    width: 30px;
    height: 20px;
    background-color: #ccc;
    border-radius: 2px;
}

.placeholder-country[b-u8kkvmquoi],
.placeholder-percentage-small[b-u8kkvmquoi],
.placeholder-sales[b-u8kkvmquoi] {
    height: 15px;
    width: 20%;
}

/* Chart Placeholder */
.dashboard-chart.placeholder[b-u8kkvmquoi] {
    padding: 20px;
    margin-bottom: 20px;
}

.placeholder-chart-header[b-u8kkvmquoi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.placeholder-chart-title[b-u8kkvmquoi],
.placeholder-button[b-u8kkvmquoi] {
    height: 20px;
    width: 30%;
}

.placeholder-button[b-u8kkvmquoi] {
    width: 15%;
}

.placeholder-canvas[b-u8kkvmquoi] {
    width: 100%;
    height: 200px;
    background-color: #ccc;
    border-radius: 4px;
}

/* Best Selling Products Placeholder */
.best-selling-products.placeholder[b-u8kkvmquoi] {
    padding: 20px;
}

.placeholder-search[b-u8kkvmquoi] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.placeholder-icon[b-u8kkvmquoi] {
    width: 20px;
    height: 20px;
    background-color: #ccc;
    border-radius: 50%;
}

.placeholder-input[b-u8kkvmquoi] {
    width: 70%;
    height: 20px;
}

.best-selling-products-table[b-u8kkvmquoi] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

    .best-selling-products-table th[b-u8kkvmquoi],
    .best-selling-products-table td[b-u8kkvmquoi] {
        padding: 10px;
        border: 1px solid #ddd;
    }

.placeholder-table-header[b-u8kkvmquoi],
.placeholder-table-cell[b-u8kkvmquoi] {
    height: 15px;
    width: 80%;
}

.mobile-view .placeholder-card[b-u8kkvmquoi] {
    padding: 15px;
    margin-bottom: 15px;
}

.placeholder-card-title[b-u8kkvmquoi] {
    height: 20px;
    width: 60%;
    margin-bottom: 10px;
}

.placeholder-detail[b-u8kkvmquoi] {
    height: 15px;
    width: 80%;
    margin-bottom: 8px;
}
/* /Layout/SkuProfilePlaceholder.razor.rz.scp.css */
/* overlay covering all */
.sku-skeleton-overlay[b-nlkh3xyf5l] {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.8);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2rem;
    z-index: 1000;
}

/* container */
.sku-skeleton[b-nlkh3xyf5l] {
    width: 100%;
    max-width: 95%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* header bar */
.skeleton-header[b-nlkh3xyf5l] {
    height: 2.5rem;
    width: 40%;
    border-radius: 4px;
}

/* stat cards */
.sku-skeleton-stat-cards[b-nlkh3xyf5l] {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
    gap: 1rem;
}

.skeleton-card[b-nlkh3xyf5l] {
    height: 100px;
    border-radius: 12px;
}

/* chart area */
.skeleton-chart[b-nlkh3xyf5l] {
    height: 350px;
    width: 100%;
    border-radius: 16px;
}

/* table skeleton */
.skeleton-table[b-nlkh3xyf5l] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skeleton-table-header[b-nlkh3xyf5l] {
    height: 40px;
    width: 100%;
    border-radius: 8px;
}

.skeleton-table-row[b-nlkh3xyf5l] {
    height: 48px;
    width: 100%;
    border-radius: 6px;
}

/* common pulse animation */
.skeleton[b-nlkh3xyf5l] {
    background: #e5e7eb;
    position: relative;
    overflow: hidden;
}

    .skeleton[b-nlkh3xyf5l]::after {
        content: "";
        position: absolute;
        top: 0;
        left: -150px;
        height: 100%;
        width: 150px;
        background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.6), rgba(255,255,255,0));
        animation: shimmer-b-nlkh3xyf5l 1.2s infinite;
    }

@keyframes shimmer-b-nlkh3xyf5l {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100%);
    }
}
/* /Layout/TotalCustomersLoadingPlaceholder.razor.rz.scp.css */


/* General Placeholder Styles */
.placeholder[b-ulssbs8i3e] {
    background-color: #e0e0e0;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

    .placeholder[b-ulssbs8i3e]::after {
        content: '';
        position: absolute;
        top: 0;
        left: -150px;
        width: 150px;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        animation: loading-b-ulssbs8i3e 1.5s infinite;
    }

@keyframes loading-b-ulssbs8i3e {
    0% {
        left: -150px;
    }

    50% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

/* Sales Card Placeholder */
.sales-card.placeholder[b-ulssbs8i3e] {
    padding: 20px;
    margin-bottom: 20px;
}

.placeholder-header[b-ulssbs8i3e] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.placeholder-title[b-ulssbs8i3e],
.placeholder-value[b-ulssbs8i3e] {
    height: 20px;
    width: 50%;
}

.placeholder-percentage[b-ulssbs8i3e] {
    height: 15px;
    width: 30%;
    margin-bottom: 20px;
}

.sales-list li[b-ulssbs8i3e] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.placeholder-flag[b-ulssbs8i3e] {
    width: 30px;
    height: 20px;
    background-color: #ccc;
    border-radius: 2px;
}

.placeholder-country[b-ulssbs8i3e],
.placeholder-percentage-small[b-ulssbs8i3e],
.placeholder-sales[b-ulssbs8i3e] {
    height: 15px;
    width: 20%;
}

/* Chart Placeholder */
.dashboard-chart.placeholder[b-ulssbs8i3e] {
    padding: 20px;
    margin-bottom: 20px;
}

.placeholder-chart-header[b-ulssbs8i3e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.placeholder-chart-title[b-ulssbs8i3e],
.placeholder-button[b-ulssbs8i3e] {
    height: 20px;
    width: 30%;
}

.placeholder-button[b-ulssbs8i3e] {
    width: 15%;
}

.placeholder-canvas[b-ulssbs8i3e] {
    width: 100%;
    height: 200px;
    background-color: #ccc;
    border-radius: 4px;
}

/* Best Selling Products Placeholder */
.best-selling-products.placeholder[b-ulssbs8i3e] {
    padding: 20px;
}

.placeholder-search[b-ulssbs8i3e] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.placeholder-icon[b-ulssbs8i3e] {
    width: 20px;
    height: 20px;
    background-color: #ccc;
    border-radius: 50%;
}

.placeholder-input[b-ulssbs8i3e] {
    width: 70%;
    height: 20px;
}

.best-selling-products-table[b-ulssbs8i3e] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

    .best-selling-products-table th[b-ulssbs8i3e],
    .best-selling-products-table td[b-ulssbs8i3e] {
        padding: 10px;
        border: 1px solid #ddd;
    }

.placeholder-table-header[b-ulssbs8i3e],
.placeholder-table-cell[b-ulssbs8i3e] {
    height: 15px;
    width: 80%;
}

.mobile-view .placeholder-card[b-ulssbs8i3e] {
    padding: 15px;
    margin-bottom: 15px;
}

.placeholder-card-title[b-ulssbs8i3e] {
    height: 20px;
    width: 60%;
    margin-bottom: 10px;
}

.placeholder-detail[b-ulssbs8i3e] {
    height: 15px;
    width: 80%;
    margin-bottom: 8px;
}
/* /Pages/ActiveCampaignJourneys.razor.rz.scp.css */
/* Base Styles */
body[b-h15aahk23u] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    margin: 0;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom Select & Dropdown */
.custom-select[b-h15aahk23u] {
    position: relative;
    min-width: 120px;
    max-width: 200px;
    user-select: none;
    width: auto;
    z-index: 100;
}

/* Active Campaign Custom Date Picker Modal */
.ac-modal-overlay[b-h15aahk23u] {
    position: fixed;
    top: 0;
    left: 5rem;
    right: 0;
    bottom: 0;
    background: rgb(0 0 0 / 80%);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ac-modal-content[b-h15aahk23u] {
    position: relative;
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    background-color: white;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn-b-h15aahk23u 0.3s ease-out;
}

.ac-custom-date-modal[b-h15aahk23u] {
    max-width: 500px;
    width: 95%;
}

.ac-modal-header[b-h15aahk23u] {
    padding: 30px 28px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #f9fafb, #ffffff);
    position: relative;
}

.ac-modal-header h3[b-h15aahk23u] {
    margin: 0 0 8px 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: #374151;
}

.ac-modal-subtitle[b-h15aahk23u] {
    margin: 0;
    font-size: 0.9rem;
    color: #6b7280;
}

.ac-modal-close[b-h15aahk23u] {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    color: #6b7280;
    transition: all 0.2s ease;
}

.ac-modal-close:hover[b-h15aahk23u] {
    transform: scale(1.1);
}

.ac-modal-close:active[b-h15aahk23u] {
    transform: scale(0.95);
}

.ac-modal-body[b-h15aahk23u] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.ac-custom-date-body[b-h15aahk23u] {
    padding: 28px 24px;
}

.ac-date-picker-container[b-h15aahk23u] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.ac-date-input-group[b-h15aahk23u] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ac-date-input-group label[b-h15aahk23u] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ac-date-input[b-h15aahk23u] {
    padding: 11px 12px;
    border: 2px solid #d1d5db;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    background: white;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    color: #111827;
}

/* Make calendar icon more visible */
.ac-date-input[b-h15aahk23u]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.8;
    filter: invert(0);
}

.ac-date-input[b-h15aahk23u]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.ac-date-input:hover[b-h15aahk23u] {
    border-color: #9ca3af;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.ac-date-input:focus[b-h15aahk23u] {
    outline: none;
    border-color: #000000;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.ac-date-help-text[b-h15aahk23u] {
    font-size: 0.75rem;
    color: #059669;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ac-date-help-text[b-h15aahk23u]::before {
    content: '✓';
    font-weight: 700;
    color: #10b981;
}

.ac-date-error-message[b-h15aahk23u] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #fee, #fdd);
    border: 2px solid #ef4444;
    border-radius: 8px;
    color: #991b1b;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 16px;
    animation: slideDown-b-h15aahk23u 0.3s ease;
}

.ac-date-error-message svg[b-h15aahk23u] {
    flex-shrink: 0;
    color: #dc2626;
}

.ac-date-range-summary[b-h15aahk23u] {
    padding: 14px 18px;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border: 2px solid #0ea5e9;
    border-radius: 10px;
    text-align: center;
}

.ac-date-range-summary p[b-h15aahk23u] {
    margin: 0;
    font-size: 0.9rem;
    color: #0c4a6e;
}

.ac-date-range-summary strong[b-h15aahk23u] {
    color: #075985;
    font-weight: 700;
}

.ac-date-note[b-h15aahk23u] {
    margin-top: 8px !important;
    font-size: 0.8rem !important;
    color: #0369a1 !important;
    font-style: italic;
    opacity: 0.9;
}

.ac-modal-footer[b-h15aahk23u] {
    border-top: 1px solid #e5e7eb;
}

.ac-custom-date-footer[b-h15aahk23u] {
    padding: 18px 24px;
    background: #f9fafb;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.ac-cancel-btn[b-h15aahk23u],
.ac-apply-btn[b-h15aahk23u] {
    padding: 11px 24px;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.ac-cancel-btn[b-h15aahk23u] {
    background: linear-gradient(145deg, #f3f4f6, #e5e7eb);
    color: #374151;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ac-cancel-btn:hover[b-h15aahk23u] {
    background: linear-gradient(145deg, #e5e7eb, #d1d5db);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.ac-apply-btn[b-h15aahk23u] {
    background: linear-gradient(145deg, #000000, #333333);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.ac-apply-btn[b-h15aahk23u]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.ac-apply-btn:hover[b-h15aahk23u]::before {
    left: 100%;
}

.ac-apply-btn:hover[b-h15aahk23u] {
    background: linear-gradient(145deg, #333333, #4c51bf);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

/* Mobile responsive styles for date modal */
@media (max-width: 768px) {
    .ac-modal-overlay[b-h15aahk23u] {
        left: 0;
        top: 5rem;
    }
    
    .ac-custom-date-modal[b-h15aahk23u] {
        max-width: 100%;
        width: 100%;
        max-height: calc(100vh - 5rem);
        border-radius: 0;
    }
    
    .ac-date-picker-container[b-h15aahk23u] {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    
    .ac-custom-date-body[b-h15aahk23u] {
        padding: 24px 20px;
    }
    
    .ac-custom-date-footer[b-h15aahk23u] {
        padding: 16px 20px;
    }
    
    .ac-cancel-btn[b-h15aahk23u],
    .ac-apply-btn[b-h15aahk23u] {
        width: 100%;
        padding: 13px 24px;
    }
}

.select-trigger[b-h15aahk23u] {
    position: relative;
    padding: 12px 40px 12px 16px;
    background: white;
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: black;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    text-align: left;
    min-width: 200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filter-group:has([for="goalFilter"]) .custom-select[b-h15aahk23u],
.filter-group:has([for="journeyFilter"]) .custom-select[b-h15aahk23u] {
    min-width: 250px;
    max-width: 500px;
    width: fit-content;
}

.filter-group:has([for="goalFilter"]) .select-trigger[b-h15aahk23u],
.filter-group:has([for="journeyFilter"]) .select-trigger[b-h15aahk23u] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 250px; /* Base for these specific triggers */
    padding-right: 45px;
}

.filter-group:has([for="journeyFilter"]) .select-trigger[b-h15aahk23u] {
    min-width: 200px; /* Override for journey filter */
}

.select-trigger:hover[b-h15aahk23u] {
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.select-trigger:focus[b-h15aahk23u],
.custom-select:focus-within .select-trigger[b-h15aahk23u] {
    outline: none;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.custom-select:has(.select-options) .select-trigger[b-h15aahk23u] {
    border-color: rgba(255, 255, 255, 0.5);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.select-arrow[b-h15aahk23u] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #000000;
    transition: transform 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
}

    .select-arrow.rotated[b-h15aahk23u] {
        transform: rotate(180deg);
        color: rgb(59 52 52 / 80%);
    }

.select-options[b-h15aahk23u] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: all 0.2s ease;
    animation: dropdownSlide-b-h15aahk23u 0.2s ease-out;
    z-index: 1002;
}

.select-option[b-h15aahk23u] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f3f4f6;
    position: relative;
    overflow: hidden;
}

.select-option[b-h15aahk23u]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent);
    transition: left 0.3s ease;
}

.select-overlay[b-h15aahk23u] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1001;
}

.select-option:hover[b-h15aahk23u]::before {
    left: 100%;
}

.select-option:last-child[b-h15aahk23u] {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
}

.select-option:hover[b-h15aahk23u] {
    background: linear-gradient(145deg, #f8fafc, #f1f5f9);
    color: #000000;
    box-shadow: inset 2px 0 0 rgba(0, 0, 0, 0.3);
}

.select-option.selected[b-h15aahk23u] {
    background: linear-gradient(145deg, #000000, #333333);
    color: #ffffff;
    font-weight: 600;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 2px 0 0 rgba(255, 255, 255, 0.3);
}

.select-option.selected:hover[b-h15aahk23u] {
    background: linear-gradient(145deg, #333333, #000000);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 2px 0 0 rgba(255, 255, 255, 0.4);
        }

    .select-option .flag-icon[b-h15aahk23u],
    .market-flag .flag-icon[b-h15aahk23u] {
        width: 20px; /* Adjusted for consistency */
        height: 15px; /* Adjusted for consistency */
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.select-option:hover .flag-icon[b-h15aahk23u] {
    transform: scale(1.05);
}

/* Buttons - Primary & Secondary */
.refresh-btn[b-h15aahk23u],
.retry-btn[b-h15aahk23u] {
    padding: 6px 8px;
    background: linear-gradient(145deg, #000000, #333333);
    color: white;
    border: 2px solid transparent;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .refresh-btn[b-h15aahk23u]::before,
    .retry-btn[b-h15aahk23u]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

    .refresh-btn:hover[b-h15aahk23u]::before,
    .retry-btn:hover[b-h15aahk23u]::before {
    left: 100%;
}

    .refresh-btn:hover:not(:disabled)[b-h15aahk23u],
    .retry-btn:hover[b-h15aahk23u] {
    background: linear-gradient(145deg, #333333, #4c51bf);
    transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.chart-btn[b-h15aahk23u] {
    padding: 10px 16px;
    background: linear-gradient(145deg, #ffffff, #f3f4f6);
    color: #6b7280;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
}

.chart-btn[b-h15aahk23u]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
    transition: left 0.5s ease;
}

.chart-btn:hover[b-h15aahk23u]::before {
    left: 100%;
}

.chart-btn:hover[b-h15aahk23u] {
    background: linear-gradient(145deg, #f9fafb, #f1f5f9);
    border-color: #000000;
    color: #000000;
    transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.chart-btn.active[b-h15aahk23u] {
    background: linear-gradient(145deg, #000000, #333333);
    color: #ffffff;
    border-color: #000000;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.chart-btn.active:hover[b-h15aahk23u] {
    background: linear-gradient(145deg, #333333, #4c51bf);
    transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }

.percentage-btn[b-h15aahk23u] {
    background: linear-gradient(145deg, #f8fafc, #e2e8f0);
    border: 2px solid #6d69cc;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 8px;
    color: #6d69cc;
    font-weight: 800;
    font-size: inherit;
    font-family: inherit;
    transition: all 0.3s ease;
    text-decoration: none;
    padding: 2px 6px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(109, 105, 204, 0.2);
}

    .percentage-btn[b-h15aahk23u]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(109, 105, 204, 0.1), transparent);
        transition: left 0.5s ease;
    }

    .percentage-btn:hover[b-h15aahk23u]::before {
        left: 100%;
    }

    .percentage-btn:hover[b-h15aahk23u] {
        background: linear-gradient(145deg, #6d69cc, #5854a6);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(109, 105, 204, 0.4);
        border-color: #5854a6;
    }

    .percentage-btn:active[b-h15aahk23u] {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(109, 105, 204, 0.3);
    }

    .percentage-btn:focus[b-h15aahk23u] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(109, 105, 204, 0.3);
    }

/* Chart Filter Dropdown */
.chart-filter-dropdown[b-h15aahk23u] {
    margin-left: auto;
}

.chart-filter-options[b-h15aahk23u] {
    max-height: 300px;
    overflow-y: auto;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
}

.filter-checkbox-option[b-h15aahk23u] {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    user-select: none;
}

.filter-checkbox-option:hover[b-h15aahk23u] {
    background-color: #f3f4f6;
}

.filter-checkbox-option input[type="checkbox"][b-h15aahk23u] {
    margin-right: 8px;
    width: 16px;
    height: 16px;
    accent-color: #000000;
    cursor: pointer;
}

.checkbox-label[b-h15aahk23u] {
    font-size: 13px;
    color: #374151;
    line-height: 1.4;
    word-break: break-word;
    flex: 1;
}

.all-journeys-option[b-h15aahk23u] {
    font-weight: 600;
    background: linear-gradient(145deg, #000000, #333333);
    color: #ffffff;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 4px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    user-select: none;
}

.all-journeys-option:hover[b-h15aahk23u] {
    background: linear-gradient(145deg, #333333, #000000);
}

.all-journeys-option .checkbox-label[b-h15aahk23u] {
    color: #ffffff;
    font-weight: 600;
}

.all-journeys-option input[type="checkbox"][b-h15aahk23u] {
    accent-color: #ffffff;
}

/* Progress Bar */
.progress-container[b-h15aahk23u] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.progress-bar[b-h15aahk23u] {
    flex: 1;
    height: 10px; /* Default height */
    background: #e5e7eb;
    border-radius: 4px; /* Default radius */
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.8);
    min-width: 60px;
    position: relative;
}

.progress-fill[b-h15aahk23u] {
    height: 100%;
    background: linear-gradient(90deg, #f6b43b, #d87c1d);
    border-radius: 3px;
    transition: none;
    position: relative;
}

.progress-fill[b-h15aahk23u]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    right: 0;
    bottom: 0;
    width: 100%;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 100%);
    animation: progressWave-b-h15aahk23u 2s ease-in-out infinite;
}

.customer-row:hover .progress-fill[b-h15aahk23u]::before {
    animation-duration: 1.5s;
}

.progress-fill.complete[b-h15aahk23u] {
    background: linear-gradient(90deg, #10b981, #059669); /* Specific for complete */
}

.progress-fill.complete[b-h15aahk23u]::before {
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 100%);
    }

.progress-text[b-h15aahk23u] {
    font-size: 11px; /* Specific for journey stages modal */
    font-weight: 600;
    color: #374151;
    min-width: 32px; /* Specific for journey stages modal */
    text-align: right;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.customer-row:hover .progress-text[b-h15aahk23u] {
    color: #000000;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}


/* Status Dots & Indicators */
.status-dot[b-h15aahk23u] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}

.status-dot.all[b-h15aahk23u] {
    background: linear-gradient(135deg, #6b7280, #9ca3af);
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.status-dot.active[b-h15aahk23u] {
    background: linear-gradient(135deg, #10b981, #34d399);
    border: 1px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.3);
}

.status-dot.inactive[b-h15aahk23u] {
    background: linear-gradient(135deg, #ef4444, #f87171);
    border: 1px solid rgba(239, 68, 68, 0.3);
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.3);
}

.status-indicator[b-h15aahk23u] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
}

.status-indicator .status-dot[b-h15aahk23u] {
    width: 6px;
    height: 6px;
}

/* Scrollbar Styling */
.select-options[b-h15aahk23u]::-webkit-scrollbar,
.customer-table-wrapper[b-h15aahk23u]::-webkit-scrollbar,
.stages-table-wrapper[b-h15aahk23u]::-webkit-scrollbar { /* Applied to all scrollable areas */
    width: 6px;
}

.select-options[b-h15aahk23u]::-webkit-scrollbar-track,
.customer-table-wrapper[b-h15aahk23u]::-webkit-scrollbar-track,
.stages-table-wrapper[b-h15aahk23u]::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #f1f5f9, #e2e8f0);
    border-radius: 3px;
}

.select-options[b-h15aahk23u]::-webkit-scrollbar-thumb,
.customer-table-wrapper[b-h15aahk23u]::-webkit-scrollbar-thumb,
.stages-table-wrapper[b-h15aahk23u]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #cbd5e1, #94a3b8);
    border-radius: 3px;
    transition: background 0.3s ease;
}

    .select-options[b-h15aahk23u]::-webkit-scrollbar-thumb:hover,
    .customer-table-wrapper[b-h15aahk23u]::-webkit-scrollbar-thumb:hover,
    .stages-table-wrapper[b-h15aahk23u]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #94a3b8, #64748b);
}

/* Focus Trap */
.custom-select:focus-within[b-h15aahk23u] {
    z-index: 1001;
}

/* Removed old select styling */
.filter-select[b-h15aahk23u] {
    display: none;
}

/* Spinners */
.spinner[b-h15aahk23u] {
    width: 18px;
    height: 18px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spinEnhanced 1s linear infinite;
}

.loading-spinner[b-h15aahk23u] {
    width: 50px;
    height: 50px;
    border: 4px solid #e5e7eb;
    border-top: 4px solid #000000;
    border-radius: 50%;
    animation: spin-b-h15aahk23u 1s linear infinite;
    margin: 0 auto 20px;
    /* Force GPU acceleration - animation continues even when JS is blocked */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Loading & Error States */
.loading-container[b-h15aahk23u],
.error-container[b-h15aahk23u],
.modal-loading[b-h15aahk23u],
.stages-loading[b-h15aahk23u],
.no-customers[b-h15aahk23u],
.no-stages[b-h15aahk23u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.loading-container p[b-h15aahk23u] {
    margin: 10px 0 5px 0;
    color: #374151;
    font-size: 1rem;
    font-weight: 500;
}

.loading-progress[b-h15aahk23u] {
    margin: 5px 0 0 0 !important;
    color: #6b7280 !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    font-style: italic;
}

.error-icon[b-h15aahk23u] {
    color: #ef4444;
    margin-bottom: 20px;
}

.error-container h3[b-h15aahk23u],
.no-stages h3[b-h15aahk23u] {
    color: #374151;
    margin-bottom: 10px; /* Adjusted for consistency */
}

.error-container p[b-h15aahk23u],
.no-stages p[b-h15aahk23u] {
    color: #6b7280;
    margin-bottom: 20px; /* Adjusted for consistency */
    max-width: 400px; /* Added for consistency with no-stages */
}

/* KPI Section */
.kpi-section[b-h15aahk23u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.kpi-card[b-h15aahk23u] {
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kpi-card:hover[b-h15aahk23u] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.kpi-icon[b-h15aahk23u] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.kpi-icon.contacts[b-h15aahk23u] {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.kpi-icon.revenue[b-h15aahk23u] {
    background: linear-gradient(135deg, #f093fb, #f5576c);
}

.kpi-icon.rpc[b-h15aahk23u] {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.kpi-content h3[b-h15aahk23u] {
    margin: 0 0 8px 0;
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    line-height: 1.2;
}

.kpi-value[b-h15aahk23u] {
    margin: 0 0 4px 0;
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
}

.kpi-label[b-h15aahk23u] {
    font-size: 0.85rem;
    color: #6b7280;
}

.kpi-dual-values[b-h15aahk23u] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kpi-primary-value[b-h15aahk23u] {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.kpi-secondary-value[b-h15aahk23u] {
    opacity: 0.8;
}

.kpi-value-secondary[b-h15aahk23u] {
    margin: 0 0 4px 0;
    font-size: 2rem;
    font-weight: 600;
    color: #000000;
}

.kpi-label-secondary[b-h15aahk23u] {
    font-size: 0.85rem;
    color: #6b7280;
    white-space: nowrap;
}

.submetric-rate[b-h15aahk23u] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.submetric-rate[b-h15aahk23u]::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
}

.kpi-card .submetric-rate[data-rate="high"][b-h15aahk23u] {
    color: #10b981;
}

.kpi-card .submetric-rate[data-rate="medium"][b-h15aahk23u] {
    color: #f59e0b;
}

.kpi-card .submetric-rate[data-rate="low"][b-h15aahk23u] {
    color: #ef4444;
}

/* KPI Equal Values Layout */
.kpi-equal-values[b-h15aahk23u] {
    display: flex;
    gap: 20px;
    width: 100%;
    justify-content: space-between;
}

.kpi-equal-value[b-h15aahk23u] {
    flex: 1;
    text-align: center;
}

.kpi-value-equal[b-h15aahk23u] {
    margin: 0 0 4px 0;
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
}

.kpi-label-equal[b-h15aahk23u] {
        font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.2;
}

.kpi-value-equal.percentage[b-h15aahk23u] {
    color: #4c51bf;
    font-weight: 700;
}

/* KPI Secondary Metric Layout */
.kpi-secondary-metric[b-h15aahk23u] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* KPI Side-by-Side Layout */
.kpi-side-by-side[b-h15aahk23u] {
    display: flex;
    gap: 20px;
    width: 100%;
    justify-content: space-between;
}

.kpi-side-metric[b-h15aahk23u] {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.kpi-value-large[b-h15aahk23u] {
    margin: 0 0 10px 0;
    font-size: 2rem;
    font-weight: 700;
    margin-top: 26px;
    color: #111827;
}

.kpi-label-large[b-h15aahk23u] {
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.2;
    margin-bottom:6px;
}

/* Charts Section */
.charts-section[b-h15aahk23u] {
    margin-bottom: 30px;
}

.chart-container[b-h15aahk23u] {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    position: relative;
}

.chart-container[b-h15aahk23u]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.3), transparent);
}

.chart-container:hover[b-h15aahk23u] {
    transform: translateY(-2px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.chart-header[b-h15aahk23u] {
    padding: 24px 28px;
    border-bottom: 1px solid rgba(229, 231, 235, 0.6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    background: linear-gradient(135deg, #f9fafb, #ffffff);
    position: relative;
}

.chart-header[b-h15aahk23u]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.2), transparent);
}

.chart-controls[b-h15aahk23u] {
    display: flex;
    gap: 10px; /* Default gap */
    flex-wrap: wrap;
}

/* Chart header controls layout */
.chart-header-controls[b-h15aahk23u] {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* View toggle buttons */
.view-toggle-buttons[b-h15aahk23u] {
    display: flex;
    border-radius: 8px;
    padding: 4px;
    gap: 2px;
    border: 1px solid rgba(229, 231, 235, 0.6);
}

.view-toggle-btn[b-h15aahk23u] {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    min-height: 36px;
    min-width: 36px;
}

    .view-toggle-btn:hover[b-h15aahk23u] {
        background: linear-gradient(135deg, #57cff8, #0066ff);
        color: #374151;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .view-toggle-btn.active[b-h15aahk23u] {
        background: linear-gradient(135deg, #57cff8, #0066ff);
        color: white;
        box-shadow: 0 2px 8px rgba(0, 82, 255, 0.3);
    }

.view-toggle-btn.active:hover[b-h15aahk23u] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 82, 255, 0.4);
}

.view-toggle-btn svg[b-h15aahk23u] {
    width: 16px;
    height: 16px;
}

.chart-wrapper[b-h15aahk23u] {
    padding: 24px;
    height: 400px;
    position: relative;
    background: linear-gradient(135deg, #ffffff, #fafbfc);
}

.chart-wrapper canvas[b-h15aahk23u] {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}

.chart-wrapper .chartjs-legend ul li.hidden span[b-h15aahk23u] {
    text-decoration: line-through !important;
    color: #9ca3af !important;
    opacity: 0.6;
}

.comparison-charts[b-h15aahk23u] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* Stack comparison charts vertically on mobile */
@media (max-width: 768px) {
    .comparison-charts[b-h15aahk23u] {
        grid-template-columns: 1fr;
    }
}

.half-width .chart-wrapper[b-h15aahk23u] {
    height: 350px;
}

/* Comparison table wrapper */
.comparison-table-wrapper[b-h15aahk23u] {
    padding: 24px;
    height: 350px;
    overflow-y: auto;
    background: linear-gradient(135deg, #ffffff, #fafbfc);
}

/* Comparison table */
.comparison-table[b-h15aahk23u] {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(229, 231, 235, 0.6);
}

    .comparison-table th[b-h15aahk23u] {
        background: linear-gradient(135deg, #f9fafb, #ffffff);
        color: #374151;
        font-weight: 600;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 16px 20px;
        text-align: center;
        border-bottom: 2px solid rgba(229, 231, 235, 0.8);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .comparison-table td[b-h15aahk23u] {
        padding: 14px 20px;
        border-bottom: 1px solid rgba(229, 231, 235, 0.4);
        font-size: 0.75rem;
        color: #374151;
        vertical-align: middle;
    }

.comparison-table tbody tr[b-h15aahk23u] {
    transition: all 0.2s ease;
}

.comparison-table tbody tr:hover[b-h15aahk23u] {
    background: linear-gradient(135deg, rgba(0, 82, 255, 0.03), rgba(59, 130, 246, 0.02));
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.comparison-table tbody tr:last-child td[b-h15aahk23u] {
    border-bottom: none;
}

/* Table cell specific styling */
.journey-name-cell[b-h15aahk23u] {
    font-weight: 600;
    color: #1f2937;
    max-width: 200px;
    text-align:center;
    word-wrap: break-word;
    font-size: 0.8rem;
}

.revenue-cell[b-h15aahk23u] {
    font-weight: 600;
    color: #059669;
    text-align: center;
    font-size: 0.8rem;
}

.percentage-cell[b-h15aahk23u] {
    font-weight: 600;
    color: #0052ff;
    text-align: center;
    font-size: 0.8rem;
}

.contacts-cell[b-h15aahk23u] {
    font-weight: 600;
    color: #6b7280;
    text-align: center;
    font-size: 0.8rem;
}

/* No data message */
.no-data-message[b-h15aahk23u] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    text-align: center;
}

.no-data-message p[b-h15aahk23u] {
    color: #6b7280;
    font-size: 0.8rem;
    font-weight: 500;
    margin: 0;
}

/* Table Section */
.table-section[b-h15aahk23u] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.table-header[b-h15aahk23u] {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.table-controls[b-h15aahk23u] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.search-input[b-h15aahk23u] {
    padding: 10px 14px;
    border: none; /* Base for search input */
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    background: linear-gradient(145deg, #ffffff, #f9fafb);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
    min-width: 220px;
}

.search-input[b-h15aahk23u]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
    transition: left 0.5s ease;
}

.search-input:hover[b-h15aahk23u]::before {
    left: 100%;
}

.search-input:focus[b-h15aahk23u] {
    outline: none;
    border-color: #000000;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 3px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.search-input:hover[b-h15aahk23u] {
    border-color: #333333;
    transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.journey-table-wrapper[b-h15aahk23u] {
    overflow-x: auto;
}

.journey-performance-table[b-h15aahk23u] {
    width: 100%;
    border-collapse: collapse;
}

    .journey-performance-table th[b-h15aahk23u],
    .customer-table th[b-h15aahk23u],
    .stages-table th[b-h15aahk23u] { /* Combined table headers */
    background: #f9fafb;
    padding: 12px 10px;
    text-align: left;
        font-size: 13px; /* Default for journey performance table */
    font-weight: 600;
        color: #374151; /* Default for journey performance table */
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

.customer-table th[b-h15aahk23u],
.stages-table th[b-h15aahk23u] { /* Overrides for customer/stages tables */
    background: white; /* Different background for customer/stages */
    color: black;
    font-size: 0.9rem; /* stages table specific */
    text-transform: uppercase; /* stages table specific */
    letter-spacing: 0.5px; /* stages table specific */
    padding: 10px; /* stages table specific */
}

    .customer-table th:hover[b-h15aahk23u],
    .stages-table th:hover[b-h15aahk23u] {
        background: #f9fafb;
    }

.journey-performance-table td[b-h15aahk23u],
.customer-table td[b-h15aahk23u],
.stages-table td[b-h15aahk23u] { /* Combined table data cells */
    padding: 12px 13px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 13px; /* Default for journey performance table */
    color: #374151;
    text-align: left; /* <-- ADD THIS: Explicitly set text alignment */
    transition: background-color 0.2s ease;
    vertical-align: middle; /* stages table specific */
    word-wrap: break-word; /* stages table specific */
}

.stages-table[b-h15aahk23u] {
    font-size: 0.8rem;
}

.stages-table td[b-h15aahk23u] {
    padding: 10px 12px; /* stages table specific */
}

.journey-performance-table tbody tr:hover[b-h15aahk23u],
.customer-row:hover[b-h15aahk23u] { /* Combined table row hover */
    background: #f9fafb;
}

.stage-row:hover[b-h15aahk23u] { /* Stages specific hover for linear gradient */
    transform: none; /* Ensure no extra transform from general hover */
}

.journey-table-footer[b-h15aahk23u],
.modal-footer[b-h15aahk23u] { /* Combined footers */
    padding: 20px 24px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.pagination-info p[b-h15aahk23u] {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 0;
}

.pagination-controls[b-h15aahk23u] {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    will-change: transform;
}

.pagination-btn[b-h15aahk23u] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 2px solid #e5e7eb;
    background: #ffffff;
    color: #6b7280;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    will-change: transform, background-color;
}

.pagination-btn:hover:not(.disabled)[b-h15aahk23u] {
    background: linear-gradient(145deg, #333333, #555555);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.pagination-btn.active[b-h15aahk23u] {
    background: linear-gradient(145deg, #4b5563, #6b7280);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(75, 85, 99, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.pagination-btn.active:hover[b-h15aahk23u] {
    background: linear-gradient(145deg, #6b7280, #9ca3af);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(75, 85, 99, 0.5);
    border-color: rgba(255, 255, 255, 0.3);
}

.pagination-btn.disabled[b-h15aahk23u] {
    opacity: 0.4;
    cursor: not-allowed;
    background: linear-gradient(145deg, #6b7280, #9ca3af);
    color: #d1d5db;
    transform: none !important;
    box-shadow: none !important;
}

.pagination-btn.page-number[b-h15aahk23u] {
    min-width: 10px;
    width: auto;
    padding: 0 12px;
}

.customer-row[b-h15aahk23u] {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.market-flag[b-h15aahk23u] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Modals - General */
.modal-overlay[b-h15aahk23u] {
    position: fixed;
    top: 0;
    left: 5rem;
    right: 0;
    bottom: 0;
    background: rgb(0 0 0 / 80%);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-content[b-h15aahk23u] {
    position: relative;
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 1200px;
    background-color: white;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn-b-h15aahk23u 0.3s ease-out;
}

.modal-header[b-h15aahk23u] {
    padding: 40px 38px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #f9fafb, #ffffff);
    position: relative;
}

.modal-header h3[b-h15aahk23u] {
    margin: 0 0 8px 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #374151;
}

.modal-subtitle[b-h15aahk23u] {
    margin: 0;
    font-size: 0.95rem;
    color: #6b7280;
}

.modal-close[b-h15aahk23u] {
    position: absolute;
    top: 0;
    right: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    color: #6b7280;
    transition: all 0.2s ease;
}

.modal-close:hover[b-h15aahk23u] {
    transform: scale(1.1);
}

.modal-close:active[b-h15aahk23u] {
    transform: scale(0.95);
}

.modal-body[b-h15aahk23u] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.customer-search[b-h15aahk23u] {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.search-container[b-h15aahk23u] {
    position: relative;
    display: flex;
    align-items: center;
}

.customer-search .search-input[b-h15aahk23u] {
    flex: 1;
    padding: 12px 40px 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.95rem;
    background: white;
    transition: all 0.3s ease;
}

.customer-search .search-input:focus[b-h15aahk23u] {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.clear-search-btn[b-h15aahk23u] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: #6b7280;
    transition: all 0.2s ease;
}

.clear-search-btn:hover[b-h15aahk23u] {
    background: #f3f4f6;
    color: #374151;
}

.search-results-info[b-h15aahk23u] {
    margin-top: 12px;
}

.search-results-info p[b-h15aahk23u] {
    margin: 0;
    font-size: 0.9rem;
    color: #6b7280;
    font-style: italic;
}

.customer-table-wrapper[b-h15aahk23u] {
    position: relative;
    overflow-x: auto;
}

.customer-table[b-h15aahk23u] {
    width: 100%;
    border-collapse: collapse;
}

/* Stages Modal Specifics */
.stages-table-container[b-h15aahk23u] {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 24px;
    overflow: auto;
}

.stages-summary[b-h15aahk23u] {
    display: flex;
    gap: 20px;
        margin-bottom: 30px;
    overflow: hidden;
}

.summary-card[b-h15aahk23u] {
    background: white;
    padding: 24px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    transition: transform 0.2s ease;
    flex: 1;
    margin-bottom: 2rem;
    min-width: 0;
}

    .summary-card:hover[b-h15aahk23u] {
        transform: translateY(-2px);
    }

    .summary-card h4[b-h15aahk23u] {
        margin: 0 0 12px 0;
        font-size: 0.9rem;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.summary-value[b-h15aahk23u] {
    font-size: 1.8rem;
    font-weight: 700;
    color: #111827;
    display: block;
}

.stages-table thead[b-h15aahk23u] {
    background: #f9fafb;
        position: relative;
    top: 0;
    z-index: 10;
}

.stage-journey-col[b-h15aahk23u],
.stage-journey-cell[b-h15aahk23u] {
    width: 20%;
}

.stage-name-col[b-h15aahk23u],
.stage-name-cell[b-h15aahk23u] {
    width: 25%;
}

.stage-contacts-col[b-h15aahk23u],
.stage-contacts-cell[b-h15aahk23u] {
    width: 15%;
    text-align: left;
}

.stage-goal-col[b-h15aahk23u],
.stage-goal-cell[b-h15aahk23u] {
    width: 15%;
    text-align: left;
}

.stage-revenue-col[b-h15aahk23u],
.stage-revenue-cell[b-h15aahk23u] {
    width: 20%;
    text-align: left;
}

.stage-progress-col[b-h15aahk23u],
.stage-progress-cell[b-h15aahk23u] {
    width: 80px; /* Fixed width */
    min-width: 80px;
        text-align: center;
}

.stage-row[b-h15aahk23u] {
    transition: all 0.2s ease;
    border-bottom: 1px solid #f3f4f6;
}

    .stage-row:hover[b-h15aahk23u] {
        background: #f9fafb;
    }

.stage-info[b-h15aahk23u] {
    display: flex;
        flex-direction: column;
    gap: 4px;
}

.stage-name[b-h15aahk23u] {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
}

.stage-description[b-h15aahk23u] {
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.4;
}

.contact-count[b-h15aahk23u] {
    display: flex;
        flex-direction: column;
    gap: 4px;
}

.count-number[b-h15aahk23u] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
}

.count-percentage[b-h15aahk23u] {
        font-size: 0.8rem;
    color: #6b7280;
    font-weight: 500;
}

.goal-count[b-h15aahk23u] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.goal-number[b-h15aahk23u] {
    font-size: 1rem;
    color:black;
}




    .journey-name[b-h15aahk23u] {
        font-size: 0.95rem;
    font-weight: 600;
    color: #1e40af;
        line-height: 1.3;
    }

/* Global Tooltip */
.global-tooltip[b-h15aahk23u] {
    position: fixed;
    background: rgba(0, 0, 0, 0.95);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    white-space: normal;
    max-width: 320px;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(-8px);
}

.global-tooltip.show[b-h15aahk23u] {
    opacity: 1;
    visibility: visible;
    transform: translateY(-4px);
}

/* Info Icons and Tooltips */
.info-icon-container[b-h15aahk23u] {
    position: relative;
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
}

.info-icon[b-h15aahk23u] {
    color: #6b7280;
    cursor: help;
    transition: all 0.2s ease;
    vertical-align: middle;
}

.info-icon:hover[b-h15aahk23u] {
    color: #4b5563;
    transform: scale(1.1);
}



/* Responsive tooltip adjustments */
@media (max-width: 768px) {
    .info-tooltip[b-h15aahk23u] {
        max-width: 280px;
        font-size: 12px;
        padding: 10px 14px;
    }
    
    .chart-header h3[b-h15aahk23u] {
        align-items: flex-start;
        line-height: 1.3;
    }
}

/* Journey Toggle Controls */
.journey-toggles[b-h15aahk23u] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.journey-toggle[b-h15aahk23u] {
    display: flex;
        align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

    .journey-toggle:hover[b-h15aahk23u] {
        background: #f3f4f6;
    }

    .journey-toggle input[type="checkbox"][b-h15aahk23u] {
        margin: 0;
        cursor: pointer;
    }

.toggle-text[b-h15aahk23u] {
    color: #374151;
    font-weight: 500;
    white-space: nowrap;
}

/* Animations */
.kpi-card.animating[b-h15aahk23u] {
    animation: currencyPulse-b-h15aahk23u 0.6s ease-in-out;
}

.chart-container.animating[b-h15aahk23u] {
    animation: chartFade-b-h15aahk23u 0.5s ease-in-out;
}

.currency-loading[b-h15aahk23u]::after {
    content: '';
        position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.2), transparent);
    animation: shimmer-b-h15aahk23u 1.5s infinite;
}

@keyframes headerGlow-b-h15aahk23u {
    0% {
        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);
    }

    100% {
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

@keyframes iconGlow-b-h15aahk23u {
    0% {
        filter: drop-shadow(0 2px 8px rgba(96, 165, 250, 0.4));
        transform: scale(1);
    }

    100% {
        filter: drop-shadow(0 4px 12px rgba(96, 165, 250, 0.6));
        transform: scale(1.03);
    }
}

@keyframes dropdownSlide-b-h15aahk23u {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

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

@keyframes progressWave-b-h15aahk23u {
    0% {
        left: -100%;
        opacity: 0;
    }

    50% {
        left: 0%;
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

@keyframes spin-b-h15aahk23u {
    0% {
        transform: rotate(0deg) translateZ(0);
    }
    100% {
        transform: rotate(360deg) translateZ(0);
    }
}

@keyframes modalSlideIn-b-h15aahk23u {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }

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

@keyframes fadeIn-b-h15aahk23u {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideDown-b-h15aahk23u {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

@keyframes currencyPulse-b-h15aahk23u {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes chartFade-b-h15aahk23u {
    0% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.8;
    }
}

@keyframes shimmer-b-h15aahk23u {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}




/* /Pages/BackgroundServiceLogger.razor.rz.scp.css */
/* Logger Container - Matching theme from CustomerClassificationLoading */
.logger-container[b-0veom8ezej] {
    display: flex;
    flex-direction: column;
    min-height: 80vh;
    background: white;
    border-radius: 12px;
    padding: 2rem;
    max-width: 95%;
    margin: 0 auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
}

.logger-header[b-0veom8ezej] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.logger-header h2[b-0veom8ezej] {
    margin: 0;
    color: #000000;
    font-size: 24px;
    font-weight: 600;
}

.header-actions[b-0veom8ezej] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.btn-refresh[b-0veom8ezej] {
    padding: 0.5rem 1rem;
    background: #000000;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s;
}

.btn-refresh:hover:not(:disabled)[b-0veom8ezej] {
    background: #333333;
}

.btn-refresh:disabled[b-0veom8ezej] {
    background: #9ca3af;
    cursor: not-allowed;
}

.auto-refresh-label[b-0veom8ezej] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
    color: #6b7280;
    cursor: pointer;
}

/* Loading Container - Same as CustomerClassificationLoading */
.loading-container[b-0veom8ezej] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    background: white;
    border-radius: 12px;
    padding: 2rem;
}

.loading-message[b-0veom8ezej] {
    text-align: center;
    color: #6b7280;
    font-size: 16px;
}

.loading-spinner[b-0veom8ezej] {
    width: 50px;
    height: 50px;
    border: 3px solid #e5e7eb;
    border-top: 3px solid #000000;
    border-radius: 50%;
    animation: spin-b-0veom8ezej 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin-b-0veom8ezej {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-message p[b-0veom8ezej] {
    margin: 0;
    font-weight: 500;
}

/* No Logs Message */
.no-logs-message[b-0veom8ezej] {
    text-align: center;
    padding: 3rem;
    color: #6b7280;
    font-size: 16px;
}

/* Summary Section */
.summary-section[b-0veom8ezej] {
    margin-bottom: 2rem;
}

.summary-section h3[b-0veom8ezej] {
    color: #000000;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 1rem;
}

.summary-grid[b-0veom8ezej] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.summary-card[b-0veom8ezej] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.5rem;
    transition: box-shadow 0.2s;
}

.summary-card:hover[b-0veom8ezej] {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.summary-card.success[b-0veom8ezej] {
    border-left: 4px solid #10b981;
}

.summary-card.failure[b-0veom8ezej] {
    border-left: 4px solid #ef4444;
}

.summary-card.unknown[b-0veom8ezej] {
    border-left: 4px solid #9ca3af;
}

.service-name[b-0veom8ezej] {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 1rem;
    word-break: break-word;
}

.service-stats[b-0veom8ezej] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.stat[b-0veom8ezej] {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.stat-label[b-0veom8ezej] {
    color: #6b7280;
}

.stat-value[b-0veom8ezej] {
    color: #000000;
    font-weight: 500;
}

.success-stat .stat-value[b-0veom8ezej] {
    color: #10b981;
}

.failure-stat .stat-value[b-0veom8ezej] {
    color: #ef4444;
}

.btn-view-logs[b-0veom8ezej] {
    width: 100%;
    padding: 0.5rem;
    background: #000000;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s;
}

.btn-view-logs:hover[b-0veom8ezej] {
    background: #333333;
}

/* Logs Section */
.logs-section[b-0veom8ezej] {
    margin-top: 2rem;
    border-top: 1px solid #e5e7eb;
    padding-top: 2rem;
}

.logs-header[b-0veom8ezej] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.logs-header h3[b-0veom8ezej] {
    color: #000000;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.btn-close[b-0veom8ezej] {
    background: none;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.btn-close:hover[b-0veom8ezej] {
    background: #f3f4f6;
}

.logs-table-container[b-0veom8ezej] {
    overflow-x: auto;
}

.logs-table[b-0veom8ezej] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.logs-table thead[b-0veom8ezej] {
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
}

.logs-table th[b-0veom8ezej] {
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    color: #000000;
}

.logs-table td[b-0veom8ezej] {
    padding: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    color: #6b7280;
}

.success-row[b-0veom8ezej] {
    background: #f0fdf4;
}

.failure-row[b-0veom8ezej] {
    background: #fef2f2;
}

.status-badge[b-0veom8ezej] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.success[b-0veom8ezej] {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.failure[b-0veom8ezej] {
    background: #fee2e2;
    color: #991b1b;
}

.cache-key-cell[b-0veom8ezej] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cache-key[b-0veom8ezej] {
    color: #3b82f6;
    font-family: monospace;
    font-size: 12px;
}

.no-cache[b-0veom8ezej] {
    color: #9ca3af;
}

.cache-status[b-0veom8ezej] {
    font-size: 16px;
    font-weight: 600;
}

.cache-status.success[b-0veom8ezej] {
    color: #10b981;
}

.cache-status.failure[b-0veom8ezej] {
    color: #ef4444;
}

.btn-details[b-0veom8ezej] {
    padding: 0.25rem 0.5rem;
    background: #f3f4f6;
    color: #000000;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.2s;
}

.btn-details:hover[b-0veom8ezej] {
    background: #e5e7eb;
}

/* Modal */
.modal-overlay[b-0veom8ezej] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 2rem;
}

.modal-content[b-0veom8ezej] {
    background: white;
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.modal-header[b-0veom8ezej] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.modal-header h4[b-0veom8ezej] {
    margin: 0;
    color: #000000;
    font-size: 18px;
    font-weight: 600;
}

.modal-body[b-0veom8ezej] {
    padding: 1.5rem;
}

.detail-row[b-0veom8ezej] {
    margin-bottom: 1rem;
    font-size: 14px;
}

.detail-row strong[b-0veom8ezej] {
    color: #000000;
    margin-right: 0.5rem;
}

.error-message[b-0veom8ezej] {
    background: #fef2f2;
    border: 1px solid #fee2e2;
    border-radius: 4px;
    padding: 0.75rem;
    color: #991b1b;
    margin-top: 0.5rem;
    font-family: monospace;
    font-size: 12px;
    white-space: pre-wrap;
}

.details-content[b-0veom8ezej] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 0.75rem;
    margin-top: 0.5rem;
    font-size: 12px;
    white-space: pre-wrap;
    color: #374151;
}

.metadata-content[b-0veom8ezej] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 0.75rem;
    margin-top: 0.5rem;
    font-size: 12px;
    overflow-x: auto;
    color: #374151;
}

/* Responsive Design */
@media (max-width: 768px) {
    .logger-container[b-0veom8ezej] {
        padding: 1rem;
        margin: 0.5rem;
        min-height: 300px;
    }

    .logger-header[b-0veom8ezej] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .summary-grid[b-0veom8ezej] {
        grid-template-columns: 1fr;
    }

    .logs-table[b-0veom8ezej] {
        font-size: 12px;
    }

    .logs-table th[b-0veom8ezej],
    .logs-table td[b-0veom8ezej] {
        padding: 0.5rem;
    }

    .modal-content[b-0veom8ezej] {
        margin: 1rem;
        max-height: 90vh;
    }
}

/* /Pages/BudgetManagement.razor.rz.scp.css */
/* Seller Selector Wrapper */
.seller-selector-wrapper[b-wogdzyw17w] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: auto;
    background: transparent;
    padding: 2rem 1rem 1rem 1rem;
}

/* Seller Selector Panel */
.seller-selector-panel[b-wogdzyw17w] {
    background: var(--lv-background-primary, #ffffff);
    padding: 2rem 2.5rem;
    border-radius: var(--lv-border-radius, 12px);
    border: 1px solid var(--lv-border-primary, #e5e7eb);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    max-width: 600px;
    width: 100%;
}

.selector-content[b-wogdzyw17w] {
    text-align: center;
}

.selector-content h2[b-wogdzyw17w] {
    margin: 0 0 0.25rem 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--lv-text-primary, #111);
}

.selector-subtitle[b-wogdzyw17w] {
    margin: 0 0 1.5rem 0;
    font-size: 13px;
    color: var(--lv-text-secondary, #6b7280);
    font-weight: 500;
    line-height: 1.4;
}

/* Seller Search Group */
.seller-search-group[b-wogdzyw17w] {
    position: relative;
    width: 100%;
}

.seller-search-input[b-wogdzyw17w] {
    width: 100%;
    padding: 12px 16px 12px 40px;
    border: 2px solid var(--lv-border-primary, #e5e7eb);
    border-radius: var(--lv-border-radius-small, 8px);
    background: var(--lv-background-primary, #fff);
    color: var(--lv-text-primary, #111);
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.seller-search-input:focus[b-wogdzyw17w] {
    outline: none;
    border-color: #6b7280;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.seller-search-input[b-wogdzyw17w]::placeholder {
    color: var(--lv-text-disabled, #9ca3af);
}

.search-icon[b-wogdzyw17w] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lv-text-secondary, #6b7280);
    pointer-events: none;
}

/* Sellers Dropdown Overlay - Click outside to close */
.sellers-dropdown-overlay[b-wogdzyw17w] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 99; /* Below dropdown but above page */
}

/* Sellers Dropdown */
.sellers-dropdown[b-wogdzyw17w] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 400px;
    overflow-y: auto;
    background: var(--lv-background-primary, #fff);
    border: 1px solid var(--lv-border-primary, #e5e7eb);
    border-radius: var(--lv-border-radius-small, 8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 100;
    display: block;
}

.seller-option[b-wogdzyw17w] {
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-bottom: 1px solid var(--lv-border-secondary, #f3f4f6);
    text-align: left;
}

.seller-option:hover[b-wogdzyw17w] {
    background-color: var(--lv-background-secondary, #f8fafc);
    padding-left: 20px;
}

.seller-option:last-child[b-wogdzyw17w] {
    border-bottom: none;
}

.seller-name[b-wogdzyw17w] {
    color: var(--lv-text-primary, #111);
    font-size: 14px;
    font-weight: 500;
}

.no-results[b-wogdzyw17w] {
    padding: 16px;
    text-align: center;
    color: var(--lv-text-secondary, #6b7280);
    font-size: 13px;
}

/* Change Seller Bar */
.change-seller-bar[b-wogdzyw17w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f0f4f8 0%, #ffffff 100%);
    border-bottom: 1px solid var(--lv-border-primary, #e5e7eb);
    margin: 0 16px 16px 16px;
    border-radius: var(--lv-border-radius-small, 8px);
}

.btn-change-seller[b-wogdzyw17w] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--lv-background-primary, #fff);
    border: 1px solid var(--lv-border-primary, #e5e7eb);
    border-radius: var(--lv-border-radius-small, 8px);
    color: var(--lv-text-primary, #111);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-change-seller:hover[b-wogdzyw17w] {
    background-color: var(--lv-background-secondary, #f8fafc);
    border-color: #6b7280;
    color: #6b7280;
}

.btn-change-seller svg[b-wogdzyw17w] {
    width: 14px;
    height: 14px;
}

.current-seller-display[b-wogdzyw17w] {
    font-size: 12px;
    color: var(--lv-text-secondary, #6b7280);
    font-weight: 500;
}

.current-seller-display strong[b-wogdzyw17w] {
    color: var(--lv-text-primary, #111);
    font-weight: 700;
}

/* Scrollbar styling for sellers dropdown */
.sellers-dropdown[b-wogdzyw17w]::-webkit-scrollbar {
    width: 6px;
}

.sellers-dropdown[b-wogdzyw17w]::-webkit-scrollbar-track {
    background: var(--lv-background-secondary, #f8fafc);
    border-radius: 3px;
}

.sellers-dropdown[b-wogdzyw17w]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.sellers-dropdown[b-wogdzyw17w]::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Firefox scrollbar */
.sellers-dropdown[b-wogdzyw17w] {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .seller-selector-wrapper[b-wogdzyw17w] {
        padding: 1rem 0.5rem 0.5rem 0.5rem;
    }

    .seller-selector-panel[b-wogdzyw17w] {
        padding: 1.5rem 1.25rem;
        max-width: 100%;
    }

    .selector-content h2[b-wogdzyw17w] {
        font-size: 22px;
    }

    .selector-subtitle[b-wogdzyw17w] {
        font-size: 12px;
        margin-bottom: 1rem;
    }

    .seller-search-input[b-wogdzyw17w] {
        font-size: 16px;
        padding: 10px 14px 10px 36px;
    }

    .sellers-dropdown[b-wogdzyw17w] {
        max-height: 300px;
    }

    .change-seller-bar[b-wogdzyw17w] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin: 0 12px 12px 12px;
    }

    .btn-change-seller[b-wogdzyw17w] {
        width: 100%;
        justify-content: center;
        font-size: 11px;
    }

    .current-seller-display[b-wogdzyw17w] {
        width: 100%;
        text-align: center;
        font-size: 11px;
    }
}

/* ========================================
   DASHBOARD STYLES (from SellerHomePage)
   ======================================== */

/* DEV TESTING: Day Type Simulator Panel */
.dev-testing-panel[b-wogdzyw17w] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin: 0 16px 12px 16px;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    border: 2px dashed #6366f1;
    border-radius: 8px;
    font-size: 13px;
}

.dev-label[b-wogdzyw17w] {
    color: #c7d2fe;
    font-weight: 600;
    white-space: nowrap;
}

.dev-select[b-wogdzyw17w] {
    padding: 6px 12px;
    border: 1px solid #6366f1;
    border-radius: 6px;
    background: #1e1b4b;
    color: #e0e7ff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    min-width: 180px;
}

.dev-select:hover[b-wogdzyw17w] {
    border-color: #818cf8;
    background: #312e81;
}

.dev-select:focus[b-wogdzyw17w] {
    outline: none;
    border-color: #a5b4fc;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.dev-current[b-wogdzyw17w] {
    color: #a5b4fc;
    font-size: 12px;
    padding: 4px 10px;
    background: rgba(99, 102, 241, 0.2);
    border-radius: 4px;
    font-family: monospace;
}

/* Budget Overview Bar - LV Theme */
.budget-overview-bar[b-wogdzyw17w] {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 14px 20px;
    margin: 0 16px 16px 16px;
    background: var(--lv-background-primary, #ffffff);
    border: 1px solid var(--lv-border-primary, #e5e7eb);
    border-radius: var(--lv-border-radius, 12px);
    overflow-x: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
    -webkit-overflow-scrolling: touch;
}

.budget-overview-bar[b-wogdzyw17w]::-webkit-scrollbar {
    height: 8px;
}

.budget-overview-bar[b-wogdzyw17w]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.budget-overview-bar[b-wogdzyw17w]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.budget-overview-bar[b-wogdzyw17w]::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* Date Filter Group */
.date-filter-group[b-wogdzyw17w] {
    display: flex;
    gap: 8px;
    padding-right: 16px;
    border-right: 1px solid var(--lv-border-primary, #e5e7eb);
    flex-shrink: 0;
    align-items: flex-end;
}

/* Budget Metric Cards - LV Theme (White bg, Black text) */
.budget-metric-card[b-wogdzyw17w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    background: var(--lv-background-primary, #fff);
    border: 2px solid var(--lv-border-primary, #e5e7eb);
    border-radius: var(--lv-border-radius-small, 10px);
    min-width: 100px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.budget-metric-card:hover[b-wogdzyw17w] {
    border-color: var(--lv-background-accent, #111);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.budget-metric-card.clickable[b-wogdzyw17w] {
    cursor: pointer;
}

.budget-metric-card.clickable:hover[b-wogdzyw17w] {
    border-color: var(--lv-background-accent, #111);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.budget-metric-card.highlight[b-wogdzyw17w] {
    border-color: #dbdbdb;
}

.budget-metric-card .metric-value[b-wogdzyw17w] {
    font-size: 18px;
    font-weight: 700;
    color: var(--lv-text-primary, #111);
    line-height: 1.2;
}

.budget-metric-card .metric-value.text-positive[b-wogdzyw17w] {
    color: #059669;
}

.budget-metric-card .metric-value.text-negative[b-wogdzyw17w] {
    color: #dc2626;
}

.budget-metric-card .metric-label[b-wogdzyw17w] {
    font-size: 10px;
    font-weight: 500;
    color: black;
    text-align: center;
    margin-top: 4px;
    line-height: 1.3;
}

/* Main Container */
.seller-container[b-wogdzyw17w] {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 380px;
    grid-template-rows: auto auto auto;
    gap: 16px;
    padding: 16px;
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
}

/* Top Row: 3 Cards + Brand Table */
.top-row[b-wogdzyw17w] {
    display: contents;
}

/* Left Sidebar - 3 cards horizontal */
.sidebar[b-wogdzyw17w] {
    display: contents;
}

.card[b-wogdzyw17w] {
    background: white;
    border-radius: 8px;
    padding: 12px 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    height: 200px;
    min-height: 200px;
    max-height: 200px;
}

.card:hover[b-wogdzyw17w] {
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
    transform: translateY(-1px);
    border-color: #e0e0e0;
}

/* Card Header with Icon + Title */
.card-header-row[b-wogdzyw17w] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.card-icon[b-wogdzyw17w] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.card:hover .card-icon[b-wogdzyw17w] {
    transform: scale(1.05);
}

.card:nth-child(1) .card-icon[b-wogdzyw17w] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.card:nth-child(2) .card-icon[b-wogdzyw17w] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.card:nth-child(3) .card-icon[b-wogdzyw17w] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.card-title-wrapper[b-wogdzyw17w] {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card h3[b-wogdzyw17w] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #111;
    letter-spacing: -0.01em;
}

.metrics[b-wogdzyw17w] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 12px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.metric-row[b-wogdzyw17w] {
    display: flex;
    align-items: center;
    padding: 0;
    gap: 12px;
}

.metric-row:last-child[b-wogdzyw17w] {
    border-bottom: none;
}

/* Row with sublabel - uses 2 columns instead of 3 */
.metric-row-with-sublabel[b-wogdzyw17w] {
    display: flex;
    align-items: center;
    padding: 0;
    gap: 12px;
}

/* Simple metric row without change/percentage column (for First Time Buyers) */
.metric-row-simple[b-wogdzyw17w] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.label[b-wogdzyw17w] {
    font-size: 12.5px;
    color: #666;
    font-weight: 500;
    text-align: left;
    flex: 1 1 auto;
    line-height: 1.3;
    text-transform: capitalize;
}

.label-column[b-wogdzyw17w] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 auto;
}

.value[b-wogdzyw17w] {
    font-size: 16px;
    font-weight: 700;
    color: #111;
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    width: 80px;
    flex-shrink: 0;
}

.change[b-wogdzyw17w] {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    text-align: center;
    min-width: 48px;
    justify-self: end;
}

.change.positive[b-wogdzyw17w] {
    color: #10b981;
    background: #d1fae5;
}

.change.negative[b-wogdzyw17w] {
    color: #ef4444;
    background: #fee2e2;
}

/* Reusable percentage value styling - matches Budget card style */
.percentage-value[b-wogdzyw17w] {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 3px;
    text-align: right;
    display: inline-block;
    min-width: 48px;
}

.percentage-value.positive[b-wogdzyw17w] {
    color: #10b981;
    background: #d1fae5;
}

.percentage-value.negative[b-wogdzyw17w] {
    color: #ef4444;
    background: #fee2e2;
}

/* Monthly Target Card Styles */
.target-card .card-icon[b-wogdzyw17w] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.sublabel-inline[b-wogdzyw17w] {
    font-size: 8px;
    color: #999;
    font-weight: 400;
    line-height: 1;
}

.progress-bar-container[b-wogdzyw17w] {
    margin-top: 8px;
    height: 5px;
    background: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar[b-wogdzyw17w] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease, background 0.3s ease;
}

/* Progress bar colors based on target achievement */
.progress-bar-green[b-wogdzyw17w] {
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

.progress-bar-orange[b-wogdzyw17w] {
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

.progress-bar-red[b-wogdzyw17w] {
    background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}

/* Day Off Badge (used in Budget Card "Today" section) */
.value.muted[b-wogdzyw17w] {
    color: #9ca3af;
    font-weight: 400;
}

.day-off-badge[b-wogdzyw17w] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    cursor: help;
    transition: transform 0.15s ease;
}

.day-off-badge:hover[b-wogdzyw17w] {
    transform: scale(1.05);
}

/* Weekend badge - calm blue/gray */
.day-off-badge.weekend[b-wogdzyw17w] {
    color: #475569;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e1;
}

.day-off-badge.weekend i[b-wogdzyw17w] {
    color: #64748b;
}

/* Holiday badge - festive red/gold */
.day-off-badge.holiday[b-wogdzyw17w] {
    color: #b45309;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
}

.day-off-badge.holiday i[b-wogdzyw17w] {
    color: #d97706;
}

/* Future message for cards */
.future-message[b-wogdzyw17w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    text-align: center;
    flex: 1;
}

.future-message i[b-wogdzyw17w] {
    font-size: 24px;
    color: #d1d5db;
    margin-bottom: 8px;
}

.future-message span[b-wogdzyw17w] {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

/* First Time Buyers Horizontal Layout - matches metric-row spacing */
.ftb-horizontal-row[b-wogdzyw17w] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0;
}

.ftb-item[b-wogdzyw17w] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    flex: 1;
    text-align: center;
}

.ftb-item .label[b-wogdzyw17w] {
    font-size: 12.5px;
    color: #666;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
    text-wrap-mode: nowrap;
    text-transform: capitalize;
    flex: 1 1 auto;
}

.ftb-item .value[b-wogdzyw17w] {
    font-size: 16px;
    font-weight: 700;
    color: #111;
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    width: auto;
}

/* Bottom Row - Charts (stacked vertically, span first 3 columns) */
.charts[b-wogdzyw17w] {
    grid-column: 1 / 4;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.chart-box[b-wogdzyw17w] {
    background: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.chart-header[b-wogdzyw17w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.chart-header h3[b-wogdzyw17w] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #111;
}

.chart-select[b-wogdzyw17w] {
    padding: 4px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: white;
    font-size: 14px;
    cursor: pointer;
}

.chart-select:hover[b-wogdzyw17w] {
    border-color: #111;
}

.chart-select:focus[b-wogdzyw17w] {
    outline: none;
    border-color: #111;
}

.chart-box canvas[b-wogdzyw17w] {
    width: 100% !important;
    height: 250px !important;
}

/* Right Section - Table (spans 2 rows) */
.table-section[b-wogdzyw17w] {
    background: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    grid-column: 4;
    grid-row: 1 / 3;
}

.table-header[b-wogdzyw17w] {
    margin-bottom: 16px;
    display:block;
}

.table-header h3[b-wogdzyw17w] {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #111;
}

.search-input[b-wogdzyw17w] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.search-input:focus[b-wogdzyw17w] {
    outline: none;
    border-color: #111;
}

.table-wrapper[b-wogdzyw17w] {
    overflow-y: auto;
    max-height: calc(100vh - 280px);
}

.brand-table[b-wogdzyw17w] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--lv-font-main, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border-radius: var(--lv-border-radius, 10px);
    overflow: hidden;
    border: 1px solid var(--lv-border-primary, #e5e7eb);
    background: var(--lv-background-primary, #ffffff);
}

.brand-table thead[b-wogdzyw17w] {
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand-table th[b-wogdzyw17w] {
    position: relative;
    background: linear-gradient(145deg, var(--lv-background-accent, #000000), var(--lv-hover-accent, #333333));
    color: var(--lv-text-inverted, #ffffff);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: none;
    text-align: left;
    padding: 10px 12px;
    border-bottom: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    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);
}

.brand-table th:hover[b-wogdzyw17w] {
    background: linear-gradient(145deg, var(--lv-hover-accent, #333333), var(--lv-background-accent, #000000));
    color: var(--lv-text-inverted, #ffffff);
}

.sort-icon[b-wogdzyw17w] {
    margin-left: 4px;
    font-size: 10px;
    opacity: 0.8;
    color: var(--lv-text-inverted, #ffffff);
}

.brand-table td[b-wogdzyw17w] {
    padding: 10px;
    border-bottom: 1px solid var(--lv-border-secondary, #f3f4f6);
    font-size: 13px;
    color: var(--lv-text-primary, #374151);
    background-color: var(--lv-background-primary, #ffffff);
}

.brand-table tbody tr[b-wogdzyw17w] {
    transition: all 0.2s ease;
}

.brand-table tbody tr:nth-child(even)[b-wogdzyw17w] {
    background-color: rgba(248, 250, 252, 0.6);
}

.brand-table tbody tr:hover[b-wogdzyw17w] {
    background: linear-gradient(145deg, var(--lv-hover-background, #f9fafb), #f3f4f6);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.brand-table tbody tr:last-child td[b-wogdzyw17w] {
    border-bottom: none;
}

.brand-name[b-wogdzyw17w] {
    font-weight: 600;
    color: #111;
}

.number[b-wogdzyw17w] {
    font-variant-numeric: tabular-nums;
    color: #111;
}

.pagination[b-wogdzyw17w] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}

.page-btn[b-wogdzyw17w] {
    width: 32px;
    height: 32px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-btn:hover:not(:disabled)[b-wogdzyw17w] {
    background: #111;
    color: white;
    border-color: #111;
}

.page-btn:disabled[b-wogdzyw17w] {
    opacity: 0.3;
    cursor: not-allowed;
}

.page-info[b-wogdzyw17w] {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

/* Mobile Only */
@media (max-width: 768px) {
    .dev-testing-panel[b-wogdzyw17w] {
        flex-wrap: wrap;
        margin: 0 12px 12px 12px;
        padding: 8px 12px;
        gap: 8px;
    }

    .dev-select[b-wogdzyw17w] {
        min-width: 150px;
        font-size: 12px;
    }

    .dev-current[b-wogdzyw17w] {
        font-size: 11px;
    }

    .budget-overview-bar[b-wogdzyw17w] {
        margin: 0 12px 12px 12px;
        padding: 10px 12px;
        gap: 10px;
    }

    .date-filter-group[b-wogdzyw17w] {
        padding-right: 12px;
    }

    .budget-metric-card[b-wogdzyw17w] {
        padding: 10px 14px;
        min-width: 85px;
    }

    .budget-metric-card .metric-value[b-wogdzyw17w] {
        font-size: 16px;
    }

    .budget-metric-card .metric-label[b-wogdzyw17w] {
        font-size: 9px;
    }

    .seller-container[b-wogdzyw17w] {
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 12px;
        display:block;
    }

    .sidebar[b-wogdzyw17w] {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .table-section[b-wogdzyw17w] {
        grid-column: 1;
        grid-row: auto;
    }

    .charts[b-wogdzyw17w] {
        grid-column: 1;
        gap: 12px;
    }

    .sidebar[b-wogdzyw17w] {
        flex-direction: column;
        gap: 12px;
    }

    .card[b-wogdzyw17w] {
        padding: 14px;
    }

    .card h3[b-wogdzyw17w] {
        font-size: 15px;
    }

    .value[b-wogdzyw17w] {
        font-size: 15px;
    }

    .charts[b-wogdzyw17w] {
        gap: 12px;
    }

    .chart-box[b-wogdzyw17w] {
        padding: 14px;
    }
    .chart-header[b-wogdzyw17w] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .table-section[b-wogdzyw17w] {
        padding: 14px;
    }

    .brand-table th[b-wogdzyw17w],
    .brand-table td[b-wogdzyw17w] {
        padding: 12px 14px;
        font-size: 11.5px;
        text-wrap-mode: nowrap;
    }

    .table-wrapper[b-wogdzyw17w] {
        max-height: 60vh;
    }
}

/* Budget Breakdown Modal - LV Theme - Mobile First */
.budget-modal-overlay[b-wogdzyw17w] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 7000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
    animation: fadeIn-b-wogdzyw17w 0.2s ease-out;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

/* Mobile: Account for navbar (5rem) */
@media (max-width: 768px) {
    .budget-modal-overlay[b-wogdzyw17w] {
        top: 5rem;
        height: calc(100vh - 5rem);
    }
}

/* Desktop: Account for sidebar */
@media (min-width: 1025px) {
    .budget-modal-overlay[b-wogdzyw17w] {
        left: 220px;
        width: calc(100vw - 220px);
    }
}

@keyframes fadeIn-b-wogdzyw17w {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.budget-modal-content[b-wogdzyw17w] {
    background: var(--lv-background-primary, #ffffff);
    border: none;
    border-radius: 0;
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    animation: modalSlideIn-b-wogdzyw17w 0.3s ease-out;
    margin: 0;
    box-sizing: border-box;
}

/* Mobile: Full screen modal, account for navbar */
@media (max-width: 768px) {
    .budget-modal-content[b-wogdzyw17w] {
        border-radius: 0;
        min-height: calc(100vh - 5rem);
        max-height: calc(100vh - 5rem);
        width: 100%;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .budget-modal-content[b-wogdzyw17w] {
        margin: calc(var(--lv-spacing-unit) * 2);
        border-radius: var(--lv-border-radius, 12px);
        min-height: calc(100vh - 64px);
        max-height: calc(100vh - 64px);
        width: calc(100% - 32px);
        max-width: calc(100% - 32px);
        border: 1px solid var(--lv-border-primary, #e5e7eb);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    }
}

/* Desktop: Account for sidebar, ensure it fits */
@media (min-width: 1025px) {
    .budget-modal-content[b-wogdzyw17w] {
        margin: calc(var(--lv-spacing-unit) * 2);
        border-radius: var(--lv-border-radius, 12px);
        width: calc(100% - 32px);
        max-width: calc(100% - 32px);
        min-height: calc(100vh - 32px);
        max-height: calc(100vh - 32px);
        border: 1px solid var(--lv-border-primary, #e5e7eb);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    }
}

@keyframes modalSlideIn-b-wogdzyw17w {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.budget-modal-header[b-wogdzyw17w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    border-bottom: 1px solid var(--lv-border-primary, #e5e7eb);
    flex-shrink: 0;
    background: var(--lv-background-primary, #ffffff);
    position: sticky;
    top: 0;
    z-index: 20;
}

.budget-modal-header h3[b-wogdzyw17w] {
    margin: 0;
    font-size: var(--lv-font-size-base, 16px);
    font-weight: 600;
    color: var(--lv-text-primary, #374151);
    font-family: var(--lv-font-heading, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif);
}

@media (min-width: 769px) {
    .budget-modal-header h3[b-wogdzyw17w] {
        font-size: var(--lv-font-size-large, 18px);
    }
}

.budget-modal-close[b-wogdzyw17w] {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--lv-text-secondary, #6b7280);
    cursor: pointer;
    padding: 4px 12px;
    border-radius: var(--lv-border-radius-small, 6px);
    transition: all 0.2s ease;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.budget-modal-close:hover[b-wogdzyw17w] {
    background: var(--lv-hover-background, #f9fafb);
    color: var(--lv-text-primary, #374151);
}

.budget-modal-body[b-wogdzyw17w] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: calc(var(--lv-spacing-unit) * 2);
    background: var(--lv-background-secondary, #f8fafc);
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 769px) {
    .budget-modal-body[b-wogdzyw17w] {
        padding: calc(var(--lv-spacing-unit) * 3);
    }
}

.budget-table-wrapper[b-wogdzyw17w] {
    overflow-x: auto;
    overflow-y: visible;
    width: 100%;
    border-radius: var(--lv-border-radius, 8px);
    background: var(--lv-background-primary, #ffffff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .budget-table-wrapper[b-wogdzyw17w] {
        border-radius: 0;
        box-shadow: none;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.budget-breakdown-table[b-wogdzyw17w] {
    width: 100%;
    min-width: 1200px;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--lv-font-main, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: var(--lv-border-radius, 8px);
    overflow: hidden;
    border: 1px solid var(--lv-border-primary, #e5e7eb);
    background: var(--lv-background-primary, #ffffff);
    table-layout: auto;
}

@media (max-width: 768px) {
    .budget-breakdown-table[b-wogdzyw17w] {
        min-width: 900px;
        border-radius: 0;
    }
    
    .budget-breakdown-table th[b-wogdzyw17w],
    .budget-breakdown-table td[b-wogdzyw17w] {
        font-size: 11.5px;
        padding: 5px;
    }
    
    .category-header-cell[b-wogdzyw17w] {
        font-size: 13px;
        padding: 5px;
    }
}

.budget-breakdown-table thead[b-wogdzyw17w] {
    background: linear-gradient(145deg, #374151, #1f2937);
    position: sticky;
    top: 0;
    z-index: 10;
}

.budget-breakdown-table th[b-wogdzyw17w] {
    padding: 5px;
    text-align: center;
    font-weight: 700;
    color: var(--lv-text-inverted, #ffffff);
    border-bottom: none;
    white-space: nowrap;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    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);
    position: relative;
}

.budget-breakdown-table th:not(:first-child)[b-wogdzyw17w]::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 0;
    height: 60%;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.2);
}

.budget-breakdown-table th:first-child[b-wogdzyw17w] {
    text-align: left;
    padding: 5px;
}

.budget-breakdown-table td[b-wogdzyw17w] {
    padding: 5px;
    border-bottom: 1px solid var(--lv-border-secondary, #f3f4f6);
    color: var(--lv-text-primary, #374151);
    font-size: 13.5px;
    position: relative;
}

.budget-breakdown-table td:not(:first-child)[b-wogdzyw17w]::before {
    content: '';
    position: absolute;
    top: 25%;
    left: 0;
    height: 50%;
    width: 1px;
    background-color: rgba(203, 213, 225, 0.5);
}

.budget-breakdown-table tbody tr[b-wogdzyw17w] {
    transition: all 0.2s ease;
    background-color: var(--lv-background-primary, #ffffff);
}

.budget-breakdown-table tbody tr:nth-child(even)[b-wogdzyw17w] {
    background-color: rgba(248, 250, 252, 0.6);
}

.budget-breakdown-table tbody tr:hover[b-wogdzyw17w] {
    background: linear-gradient(145deg, var(--lv-hover-background, #f9fafb), #f3f4f6);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
}

.budget-breakdown-table tbody tr:last-child td[b-wogdzyw17w] {
    border-bottom: none;
}

.budget-breakdown-table tbody tr.category-row[b-wogdzyw17w] {
    background: linear-gradient(145deg, #f9fafb, #f3f4f6) !important;
    border-top: 2px solid var(--lv-border-primary, #e5e7eb);
    border-bottom: 1px solid var(--lv-border-primary, #e5e7eb);
    font-weight: 700;
    font-size: 11.5px;
}

.budget-breakdown-table tbody tr.category-row td[b-wogdzyw17w] {
    padding: 5px;
}

.budget-breakdown-table tbody tr.brand-row[b-wogdzyw17w] {
    background-color: var(--lv-background-primary, #ffffff);
}

.budget-breakdown-table tbody tr.brand-row:hover[b-wogdzyw17w] {
    background: linear-gradient(145deg, var(--lv-hover-background, #f9fafb), #f3f4f6) !important;
}

.budget-breakdown-table tbody tr.grand-total-row[b-wogdzyw17w] {
    background: linear-gradient(145deg, #1f2937, #374151) !important;
    border-top: 3px solid var(--lv-border-primary, #e5e7eb);
    font-weight: 700;
    font-size: 11.5px;
}

.budget-breakdown-table tbody tr.grand-total-row td[b-wogdzyw17w] {
    border-bottom: none;
    padding: 5px;
    color: var(--lv-text-inverted, #ffffff);
}

.budget-breakdown-table tbody tr.grand-total-row td.text-positive[b-wogdzyw17w],
.budget-breakdown-table tbody tr.grand-total-row td.text-negative[b-wogdzyw17w] {
    color: var(--lv-text-inverted, #ffffff);
}

.budget-breakdown-table .category-name[b-wogdzyw17w] {
    font-weight: 700;
    color: var(--lv-text-primary, #374151);
    text-align: left;
    padding: 5px !important;
    text-transform: uppercase;
    font-size: 11.5px;
}

.category-header-cell[b-wogdzyw17w] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    font-size: 13px;
}

.category-header-cell:hover[b-wogdzyw17w] {
    background-color: rgba(0, 0, 0, 0.02);
}

.category-toggle-icon[b-wogdzyw17w] {
    font-size: 12px;
    color: var(--lv-text-secondary, #6b7280);
    transition: transform 0.2s ease;
    width: 16px;
    text-align: center;
}

.budget-breakdown-table .brand-name[b-wogdzyw17w] {
    font-weight: 500;
    color: var(--lv-text-primary, #374151);
    text-align: left;
    padding: 5px !important;
    padding-left: 20px !important;
    font-size: 13.5px;
}

.budget-breakdown-table tbody tr.brand-row.hidden[b-wogdzyw17w] {
    display: none;
}

.budget-breakdown-table tbody tr.category-row[b-wogdzyw17w] {
    cursor: pointer;
}

.budget-breakdown-table tbody tr.category-row:hover[b-wogdzyw17w] {
    background: linear-gradient(145deg, #f0f0f0, #e8e8e8) !important;
}

.budget-breakdown-table .number[b-wogdzyw17w] {
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding: 5px;
    font-weight: 500;
}

.budget-breakdown-table .text-positive[b-wogdzyw17w] {
    color: #10b981;
    font-weight: 600;
}

.budget-breakdown-table .text-negative[b-wogdzyw17w] {
    color: #ef4444;
    font-weight: 600;
}

.budget-breakdown-table .no-data[b-wogdzyw17w] {
    text-align: center;
    padding: 48px;
    color: var(--lv-text-secondary, #6b7280);
    font-style: italic;
    font-size: 11.5px;
}

/* Custom scrollbars */
.budget-modal-body[b-wogdzyw17w]::-webkit-scrollbar,
.budget-table-wrapper[b-wogdzyw17w]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.budget-modal-body[b-wogdzyw17w]::-webkit-scrollbar-track,
.budget-table-wrapper[b-wogdzyw17w]::-webkit-scrollbar-track {
    background: var(--lv-background-secondary, #f8fafc);
    border-radius: 4px;
}

.budget-modal-body[b-wogdzyw17w]::-webkit-scrollbar-thumb,
.budget-table-wrapper[b-wogdzyw17w]::-webkit-scrollbar-thumb {
    background: var(--lv-border-primary, #e5e7eb);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.budget-modal-body[b-wogdzyw17w]::-webkit-scrollbar-thumb:hover,
.budget-table-wrapper[b-wogdzyw17w]::-webkit-scrollbar-thumb:hover {
    background: var(--lv-text-secondary, #6b7280);
}

/* Mobile-specific improvements */
@media (max-width: 768px) {
    .budget-modal-overlay[b-wogdzyw17w] {
        padding-top: 0;
        align-items: flex-start;
        -webkit-overflow-scrolling: touch;
        top: 5rem;
        height: calc(100vh - 5rem);
    }
    
    .budget-modal-content[b-wogdzyw17w] {
        border-radius: 0;
        box-shadow: none;
        min-height: calc(100vh - 5rem);
        max-height: calc(100vh - 5rem);
        width: 100%;
    }
    
    .budget-modal-header[b-wogdzyw17w] {
        padding: 12px;
        border-bottom: 2px solid var(--lv-border-primary, #e5e7eb);
        flex-shrink: 0;
    }
    
    .budget-modal-close[b-wogdzyw17w] {
        font-size: 24px;
        padding: 4px 8px;
    }
    
    .budget-modal-body[b-wogdzyw17w] {
        padding: 12px;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    
    .budget-table-wrapper[b-wogdzyw17w] {
        margin: 0;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .budget-breakdown-table[b-wogdzyw17w] {
        min-width: 900px;
    }
    
    .category-header-cell[b-wogdzyw17w] {
        padding: 5px;
    }
    
    .budget-breakdown-table .brand-name[b-wogdzyw17w] {
        padding: 5px !important;
        padding-left: 20px !important;
    }
}

/* ========================================
   SKELETON LOADING STYLES
   ======================================== */

/* Base skeleton element */
.skeleton[b-wogdzyw17w] {
    background-color: #e0e0e0;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    animation: pulse-b-wogdzyw17w 1.5s ease-in-out infinite;
}

.skeleton[b-wogdzyw17w]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150px;
    width: 150px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer-b-wogdzyw17w 1.5s infinite;
}

@keyframes pulse-b-wogdzyw17w {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

@keyframes shimmer-b-wogdzyw17w {
    0% {
        left: -150px;
    }
    50%, 100% {
        left: 100%;
    }
}

/* Skeleton-specific elements */
.skeleton-container[b-wogdzyw17w] {
    animation: fadeIn-b-wogdzyw17w 0.3s ease-in;
}

.skeleton-select[b-wogdzyw17w] {
    background-color: #e0e0e0;
    border-radius: 6px;
}

.skeleton-text[b-wogdzyw17w] {
    background-color: #e0e0e0;
    border-radius: 4px;
}

.skeleton-metric-card[b-wogdzyw17w] {
    background: #f5f5f5 !important;
    border-color: #e0e0e0 !important;
}

.skeleton-card[b-wogdzyw17w] {
    background: #f5f5f5 !important;
}

.skeleton-icon[b-wogdzyw17w] {
    width: 32px;
    height: 32px;
    background-color: #d0d0d0;
    border-radius: 6px;
    margin-bottom: 12px;
}

.skeleton-badge[b-wogdzyw17w] {
    background-color: #e0e0e0;
    border-radius: 4px;
}

.skeleton-progress[b-wogdzyw17w] {
    width: 100%;
    height: 100%;
    background-color: #d0d0d0;
    border-radius: 4px;
}

.skeleton-chart-box[b-wogdzyw17w] {
    background: #f5f5f5 !important;
}

.skeleton-canvas[b-wogdzyw17w] {
    width: 100%;
    height: 250px;
    background-color: #e0e0e0;
    border-radius: 8px;
}

.skeleton-table-section[b-wogdzyw17w] {
    background: #f5f5f5 !important;
}

.skeleton-input[b-wogdzyw17w] {
    width: 100%;
    height: 36px;
    background-color: #e0e0e0;
    border-radius: 6px;
}

.skeleton-table-header[b-wogdzyw17w] {
    width: 80%;
    height: 14px;
    background-color: #d0d0d0;
    border-radius: 3px;
    margin: 0 auto;
}

.skeleton-table-cell[b-wogdzyw17w] {
    width: 70%;
    height: 12px;
    background-color: #e0e0e0;
    border-radius: 3px;
}

.skeleton-page-btn[b-wogdzyw17w] {
    width: 32px;
    height: 32px;
    background-color: #e0e0e0;
    border-radius: 6px;
}

/* Loading state for cards */
.card.skeleton-card .metrics .metric-row[b-wogdzyw17w] {
    border-bottom-color: #e0e0e0;
}

/* Disable hover effects on skeleton elements */
.skeleton-card:hover[b-wogdzyw17w],
.skeleton-chart-box:hover[b-wogdzyw17w],
.skeleton-table-section:hover[b-wogdzyw17w] {
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transform: none;
}

/* Mobile skeleton adjustments */
@media (max-width: 768px) {
    .skeleton-canvas[b-wogdzyw17w] {
        height: 200px;
    }
    
    .skeleton-metric-card[b-wogdzyw17w] {
        min-width: 75px;
    }
}

/* /Pages/BusinessPlan.razor.rz.scp.css */
/* Base */
.bp-hero[b-b54b0ln1x8], .bp-section[b-b54b0ln1x8], .bp-faq[b-b54b0ln1x8] { scroll-margin-top: 96px; }

.bp-hero[b-b54b0ln1x8] {
  position: relative;
  padding: 96px 0 60px;
  overflow: hidden;
}
.bp-hero-content[b-b54b0ln1x8] {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.bp-gradient-text[b-b54b0ln1x8] {
  font-size: clamp(28px, 6vw, 52px);
  line-height: 1.1;
  background: linear-gradient(90deg, #e6edf3, #7c9cff, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bp-sub[b-b54b0ln1x8] {
  color: #a9b7c6;
  margin-top: 14px;
  font-size: clamp(14px, 2.3vw, 18px);
}
.bp-cta[b-b54b0ln1x8] {
  display: inline-flex;
  gap: 12px;
  margin-top: 22px;
}
.bp-btn[b-b54b0ln1x8] {
  border: 1px solid rgba(124,156,255,.35);
  color: #e6edf3;
  text-decoration: none;
  border-radius: 10px;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.bp-btn.primary[b-b54b0ln1x8] { background: rgba(124,156,255,.12); box-shadow: inset 0 0 0 1px rgba(124,156,255,.25); }
.bp-btn.secondary[b-b54b0ln1x8] { background: rgba(34,211,238,.08); box-shadow: inset 0 0 0 1px rgba(34,211,238,.25); }
.bp-btn:hover[b-b54b0ln1x8] { transform: translateY(-2px); }

.bp-hero-art .orb[b-b54b0ln1x8] {
  position: absolute; filter: blur(24px); opacity: .5; pointer-events: none;
  background: radial-gradient(circle at 30% 30%, rgba(124,156,255,.7), rgba(124,156,255,0));
}
.orb-1[b-b54b0ln1x8] { width: 360px; height: 360px; right: -60px; top: -40px; }
.orb-2[b-b54b0ln1x8] { width: 280px; height: 280px; left: -40px; top: 40px; background: radial-gradient(circle at 70% 70%, rgba(34,211,238,.7), rgba(34,211,238,0)); }
.orb-3[b-b54b0ln1x8] { width: 300px; height: 300px; left: 40%; top: -80px; background: radial-gradient(circle at 50% 50%, rgba(124,156,255,.5), rgba(124,156,255,0)); }

.bp-hero-marquee[b-b54b0ln1x8] {
  overflow: hidden; position: relative; margin-top: 36px; opacity: .85;
}
.bp-marquee-track[b-b54b0ln1x8] {
  display: inline-flex; gap: 36px; color: #a3b5cb; white-space: nowrap; animation: marquee-b-b54b0ln1x8 16s linear infinite;
}
.bp-marquee-track span[b-b54b0ln1x8] { letter-spacing: 2px; font-weight: 700; opacity: .8; }
@keyframes marquee-b-b54b0ln1x8 { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.bp-hero-grid[b-b54b0ln1x8] {
  position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px; mask-image: radial-gradient(ellipse at center, #000 40%, transparent 70%);
  pointer-events: none;
}
.bp-scroll-down[b-b54b0ln1x8] {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  width: 26px; height: 42px; border-radius: 16px; border: 2px solid rgba(255,255,255,.2);
}

/* Sections */
.bp-section[b-b54b0ln1x8] { padding: 56px 0 24px; }
.bp-section-header[b-b54b0ln1x8] { text-align: center; margin-bottom: 26px; }
.bp-section-title[b-b54b0ln1x8] { font-size: clamp(22px, 4vw, 32px); }
.bp-section-sub[b-b54b0ln1x8] { color: #9fb0c3; margin-top: 8px; }

/* Cards */
.bp-cards[b-b54b0ln1x8] {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.bp-card[b-b54b0ln1x8] {
  background: linear-gradient(180deg, rgba(16,22,30,1), rgba(16,22,30,.92));
  border: 1px solid rgba(124,156,255,.18);
  border-radius: 14px;
  padding: 18px;
  min-height: 180px;
  position: relative;
  box-shadow: 0 12px 30px rgba(3,8,13,.4);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.bp-card[b-b54b0ln1x8]::before {
  content: ""; position: absolute; inset: 0; border-radius: 14px;
  background: radial-gradient(160px 160px at var(--mx, 20px) var(--my, 20px), rgba(124,156,255,.16), transparent 60%);
  pointer-events: none; transition: opacity .2s ease; opacity: .8;
}
.bp-card:hover[b-b54b0ln1x8] { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(3,8,13,.6); }
.bp-card:focus-visible[b-b54b0ln1x8] { outline: 2px solid rgba(124,156,255,.6); outline-offset: 2px; }
.bp-card-head[b-b54b0ln1x8] { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.bp-icon.gradient[b-b54b0ln1x8] {
  background: linear-gradient(135deg, #7c9cff, #22d3ee);
  -webkit-background-clip: text; background-clip: text; font-weight: 900;
}
.bp-list[b-b54b0ln1x8] { margin: 10px 0 0; padding-left: 18px; color: #b4c3d4; }
.bp-list li[b-b54b0ln1x8] { margin: 4px 0; }

/* Steps */
.bp-steps[b-b54b0ln1x8] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.bp-step[b-b54b0ln1x8] {
  background: linear-gradient(180deg, rgba(16,22,30,1), rgba(16,22,30,.92));
  border: 1px solid rgba(124,156,255,.18);
  border-radius: 14px;
  overflow: hidden;
}
.bp-step summary[b-b54b0ln1x8] {
  list-style: none; cursor: pointer; padding: 16px 18px; display: flex; align-items: center; gap: 10px; font-weight: 700;
}
.bp-step summary[b-b54b0ln1x8]::-webkit-details-marker { display: none; }
.bp-step .num[b-b54b0ln1x8] {
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px;
  background: linear-gradient(135deg, rgba(124,156,255,.18), rgba(34,211,238,.12)); border: 1px solid rgba(124,156,255,.25);
}
.bp-step-body[b-b54b0ln1x8] { padding: 10px 18px 18px; color: #b4c3d4; }
.bp-step-list[b-b54b0ln1x8] { margin: 10px 0 0; padding-left: 18px; }

/* Revenue */
.bp-revenue-grid[b-b54b0ln1x8] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bp-rev-card[b-b54b0ln1x8] {
  background: linear-gradient(180deg, rgba(16,22,30,1), rgba(16,22,30,.92));
  border: 1px solid rgba(124,156,255,.18);
  border-radius: 14px;
  padding: 18px;
}
.bp-rev-card h3[b-b54b0ln1x8] { margin: 0 0 4px; }
.bp-rev-card .muted[b-b54b0ln1x8] { color: #9fb0c3; margin: 0 0 8px; }
.bp-rev-card ul[b-b54b0ln1x8] { margin: 0; padding-left: 18px; color: #b4c3d4; }

.bp-note[b-b54b0ln1x8] { margin-top: 18px; color: #b4c3d4; text-align: center; }

/* FAQ */
.bp-faq[b-b54b0ln1x8] { display: grid; gap: 10px; max-width: 900px; margin: 0 auto; }
.bp-faq-item[b-b54b0ln1x8] { background: rgba(16,22,30,.7); border: 1px solid rgba(124,156,255,.18); border-radius: 12px; padding: 12px 16px; }
.bp-faq-item summary[b-b54b0ln1x8] { cursor: pointer; font-weight: 700; }
.bp-faq-item p[b-b54b0ln1x8] { color: #b4c3d4; margin: 8px 0 0; }

/* Animations */
.fade-in[b-b54b0ln1x8] { opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .5s ease, transform .5s ease; }
.fade-in.in-view[b-b54b0ln1x8] { opacity: 1; transform: translateY(0) scale(1); }

/* Responsive */
@media (max-width: 1100px) {
  .bp-cards[b-b54b0ln1x8] { grid-template-columns: repeat(2, 1fr); }
  .bp-steps[b-b54b0ln1x8] { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .bp-cards[b-b54b0ln1x8] { grid-template-columns: 1fr; }
  .bp-revenue-grid[b-b54b0ln1x8] { grid-template-columns: 1fr; }
  .bp-hero[b-b54b0ln1x8] { padding-top: 84px; }
}

/* Architecture toggle cards */
.bp-arch-cards[b-b54b0ln1x8] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.bp-card.bp-toggle[b-b54b0ln1x8], .bp-card.bp-hover[b-b54b0ln1x8] {
  padding: 0;
  overflow: hidden;
}
.bp-card.bp-toggle > summary[b-b54b0ln1x8], .bp-card.bp-hover > .bp-card-head[b-b54b0ln1x8] {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
}
.bp-card.bp-toggle > summary[b-b54b0ln1x8]::-webkit-details-marker { display: none; }
.bp-card.bp-toggle .arrow[b-b54b0ln1x8] {
  width: 18px; height: 18px; border: 1px solid rgba(124,156,255,.35); border-radius: 50%; position: relative; flex: 0 0 18px; opacity: .8;
}
.bp-card.bp-hover .arrow[b-b54b0ln1x8] {
  width: 18px; height: 18px; border: 1px solid rgba(124,156,255,.35); border-radius: 50%; position: relative; flex: 0 0 18px; opacity: .8;
}
.bp-card.bp-toggle .arrow[b-b54b0ln1x8]::before {
  content: '';
  position: absolute; inset: 0; margin: auto; width: 6px; height: 6px; border-right: 2px solid #a9b7c6; border-bottom: 2px solid #a9b7c6; transform: rotate(-45deg);
}
.bp-card.bp-hover .arrow[b-b54b0ln1x8]::before {
  content: '';
  position: absolute; inset: 0; margin: auto; width: 6px; height: 6px; border-right: 2px solid #a9b7c6; border-bottom: 2px solid #a9b7c6; transform: rotate(-45deg);
}
.bp-card.bp-toggle[open] .arrow[b-b54b0ln1x8] { transform: rotate(180deg); transition: transform .2s ease; }
.bp-card-body[b-b54b0ln1x8] { padding: 8px 18px 18px; color: #b4c3d4; }

/* Hover-to-reveal for architecture cards */
.bp-card.bp-toggle .bp-card-body[b-b54b0ln1x8], .bp-card.bp-hover .bp-card-body[b-b54b0ln1x8] {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .3s ease, opacity .3s ease;
}
.bp-card.bp-toggle:hover .bp-card-body[b-b54b0ln1x8],
.bp-card.bp-toggle:focus-within .bp-card-body[b-b54b0ln1x8],
.bp-card.bp-toggle[open] .bp-card-body[b-b54b0ln1x8],
.bp-card.bp-hover:hover .bp-card-body[b-b54b0ln1x8],
.bp-card.bp-hover:focus-within .bp-card-body[b-b54b0ln1x8] {
  max-height: 420px;
  opacity: 1;
}
.bp-card.bp-toggle:hover > summary .arrow[b-b54b0ln1x8],
.bp-card.bp-toggle:focus-within > summary .arrow[b-b54b0ln1x8],
.bp-card.bp-hover:hover > .bp-card-head .arrow[b-b54b0ln1x8],
.bp-card.bp-hover:focus-within > .bp-card-head .arrow[b-b54b0ln1x8] {
  transform: rotate(180deg);
}

@media (max-width: 1100px) {
  .bp-arch-cards[b-b54b0ln1x8] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .bp-arch-cards[b-b54b0ln1x8] { grid-template-columns: 1fr; }
}

/* /Pages/CustomerAI.razor.rz.scp.css */
/* If you want a background for the content within the container */
.page-container[b-p9rceq5eb4] {
    border-radius: 8px; /* Example rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Example subtle shadow */
    padding: 50px;
    margin-top: -2rem;
    overflow:hidden;
}
/* You might also want to add responsiveness */
@media (max-width: 768px) {
    .page-container[b-p9rceq5eb4] {
        padding: 0 10px !important;
        margin: 0 !important;
    }

    /* Adjust tooltip positioning based on screen space */
    .hero-title-wrapper[b-p9rceq5eb4] {
        position: relative;
    }

    .info-icon-container[b-p9rceq5eb4] {
        position: relative;
    }



    /* Mobile tooltip content adjustments */
    .info-tooltip h4[b-p9rceq5eb4] {
        font-size: 0.95rem;
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #e2e8f0;
    }

    .info-tooltip strong[b-p9rceq5eb4] {
        font-size: 0.85rem;
        margin-bottom: 0.3rem;
    }

    .info-tooltip ul li[b-p9rceq5eb4] {
        font-size: 0.75rem;
        line-height: 1.3;
        margin-bottom: 0.25rem;
    }

    .info-tooltip .tooltip-section[b-p9rceq5eb4] {
        margin-bottom: 0.75rem;
    }

    .info-tooltip .tooltip-section:last-child[b-p9rceq5eb4] {
        margin-bottom: 0;
    }

    /* Mobile hover behavior */
    .info-icon-container:hover .info-tooltip[b-p9rceq5eb4] {
        max-width: 360px;
        min-width: 350px;
        overflow-y: auto;
        height: 60dvh;
    }

    /* Mobile-specific tooltip behavior */
    /* Hide tooltip completely on mobile devices */
    @media (max-width: 646px) {
        .info-icon-container[b-p9rceq5eb4] {
            display: none !important;
        }
    }

    @media (max-width: 768px) and (min-width: 647px) {
        /* Completely disable transitions on mobile */
        .info-tooltip[b-p9rceq5eb4] {
            transition: none !important;
        }

       .ai-textarea[b-p9rceq5eb4]{
           font-size:13px !important;
       }
        /* Disable any hover behavior on mobile */
        .info-icon-container:hover .info-tooltip[b-p9rceq5eb4] {
            visibility: hidden !important;
            opacity: 0 !important;
        }
        
        /* Mobile active state - controlled by JavaScript */
        .info-tooltip.mobile-active[b-p9rceq5eb4] {
            visibility: visible !important;
            opacity: 1 !important;
            transform: translateX(10px) !important;
            max-width: 360px;
            min-width: 350px;
            overflow-y: auto;
            height: 60dvh;
        }
    }

    /* Mobile scrollbar styling */
    .info-tooltip[b-p9rceq5eb4]::-webkit-scrollbar {
        width: 4px;
    }

    .info-tooltip[b-p9rceq5eb4]::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 2px;
    }

    .info-tooltip[b-p9rceq5eb4]::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 2px;
    }

    .info-tooltip[b-p9rceq5eb4]::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.5);
    }
}


body[b-p9rceq5eb4] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: #2d3748;
    margin: 0;
    padding: 0;
}

.hero[b-p9rceq5eb4] {
    background-color: #ffffff;
    padding: 2rem 2rem;
    text-align: center;
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid #0000001a;
    /* box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.01); */
    position: relative;
    z-index: 1;
}

/* NEW: Wrapper for H1 and Info Icon to align them */
.hero-title-wrapper[b-p9rceq5eb4] {
    display: flex; /* Makes H1 and info-icon-container sit side-by-side */
    align-items: center; /* Vertically aligns them in the middle */
    justify-content: center; /* Centers the combined block */
    gap: 10px; /* Space between the H1 and the info icon */
    margin-bottom: 1rem; /* Adjust if you need more space below the title line */
}

/* Hero Title: Strong, Modern Typography */
.hero-title[b-p9rceq5eb4] {
    font-family: 'Space Mono', 'Exo 2', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: #1a202c; /* This color will now also apply to the SVG icon */
    letter-spacing: -0.03em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    font-size: 2rem;
    display: inline-flex; /* Use inline-flex to make H1 content act as a flex container */
    align-items: center; /* Align icon and text within H1 */
    gap: 12px; /* Space between the hero-icon and "Active Campaign Customer Search" text */
    margin: 0; /* Remove default H1 margin to be controlled by parent wrapper */
}

    /* Icon Styling: For the SVG icon inside H1 */
    .hero-title .hero-icon[b-p9rceq5eb4] {
        width: 45px;
        height: auto;
        vertical-align: middle;
        filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.08));
    }

/* Info Icon Container & Tooltip Styling */
.info-icon-container[b-p9rceq5eb4] {
    position: relative;
    cursor: help;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    /* This ensures its children (like the tooltip)
                          can stack above almost everything else */
}

.info-icon[b-p9rceq5eb4] {
    color: #616e7f; /* Color for the info icon */
    transition: color 0.2s ease;
}

    .info-icon:hover[b-p9rceq5eb4] {
        color: #1a202c; /* Darker color on hover */
    }

/* Desktop Tooltip Styling */
.info-tooltip[b-p9rceq5eb4] {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    transform: translateY(10px);
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    min-width: 550px;
    max-width: 600px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    text-align: left;
    white-space: normal;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Desktop only hover behavior */
@media (min-width: 769px) {
    .info-icon-container:hover .info-tooltip[b-p9rceq5eb4] {
        visibility: visible;
        opacity: 1;
        transform: translateX(10px);
    }
}
/* Desktop Tooltip Content Styling */
.info-tooltip h4[b-p9rceq5eb4] {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.15rem;
    color: #2d3748;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 10px;
    font-weight: 600;
}

.info-tooltip .tooltip-section[b-p9rceq5eb4] {
    margin-bottom: 16px;
}

    .info-tooltip .tooltip-section:last-child[b-p9rceq5eb4] {
        margin-bottom: 0;
    }

.info-tooltip strong[b-p9rceq5eb4] {
    color: #4a5568;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.info-tooltip ul[b-p9rceq5eb4] {
    list-style: none;
    padding-left: 0;
    margin-top: 6px;
}

    .info-tooltip ul li[b-p9rceq5eb4] {
        font-size: 0.85rem;
        color: #6b7280;
        margin-bottom: 4px;
        line-height: 1.4;
        position: relative;
        padding-left: 16px;
    }

        .info-tooltip ul li[b-p9rceq5eb4]:before {
            content: "•";
            color: #9ca3af;
            position: absolute;
            left: 0;
        }

        .info-tooltip ul li:last-child[b-p9rceq5eb4] {
            margin-bottom: 0;
        }

        .info-tooltip ul li strong[b-p9rceq5eb4] {
            display: inline;
            margin-bottom: 0;
            font-size: 0.85rem;
            color: #374151;
        }

/* Optional: Subtitle Styling (if you add it) */
.hero-subtitle[b-p9rceq5eb4] {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.2rem;
    color: #616e7f;
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    position: relative;
    z-index: 2;
}
/* Controls Bar */
.controls-bar[b-p9rceq5eb4] {
    background: #ffffff;
    padding: 2rem;
    display: flex;
    justify-content: center;
}

/* Search Container */
.search-container[b-p9rceq5eb4] {
    width: 100%;
    max-width: 700px;
    display: flex;
    justify-content: center;
}

.search-input-wrapper[b-p9rceq5eb4] { /* Removed [b-p9rceq5eb4] for clarity, apply to your actual CSS */
    position: relative;
    width: 100%;
    min-width: 400px;
    min-height: 120px; /* Keep this as the overall desired height for the input area */
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 16px 50px 16px 16px; /* This padding gives space around the textarea */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    display: flex;
    align-items: flex-start; /* Keeps content aligned to the top, good for multi-line textareas */
}

.ai-textarea[b-p9rceq5eb4] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.8rem !important;
    font-family: inherit;
    resize: none;
    /* Removed min-height here so it can expand */
    min-height: 100px;
    max-height: 200px;
    line-height: 1.5;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* NEW: Make the textarea take up the full available height within the flex container */
    height: 100%;
    /* NEW: Add padding to the textarea itself to match the wrapper's visual padding */
    /* This might be redundant if the wrapper already has padding, but it's good for precise control */
    padding: 0; /* Remove default padding if any, the wrapper handles it */
}

.ai-textarea[b-p9rceq5eb4] {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 transparent;
}

.ai-textarea[b-p9rceq5eb4]::-webkit-scrollbar {
    width: 4px;
}

.ai-textarea[b-p9rceq5eb4]::-webkit-scrollbar-track {
    background: transparent;
}

.ai-textarea[b-p9rceq5eb4]::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 2px;
    border: none;
}

.ai-textarea[b-p9rceq5eb4]::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

.ai-textarea[b-p9rceq5eb4]::-webkit-scrollbar-corner {
    background: transparent;
}

.ai-textarea[b-p9rceq5eb4]::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.ai-textarea:disabled[b-p9rceq5eb4] {
    color: #a0aec0;
    cursor: not-allowed;
}

/* Search Icon Button */
.search-icon-button[b-p9rceq5eb4] {
    background: #000000;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: absolute;
    bottom: 12px;
    right: 12px;
}

.search-icon[b-p9rceq5eb4] {
    width: 16px;
    height: 16px;
    color: white;
}

.search-icon-button:hover:not(:disabled)[b-p9rceq5eb4] {
    background: #6b7280;
    transform: scale(1.05);
}

.search-icon-button:disabled[b-p9rceq5eb4] {
    background: #e5e7eb;
    cursor: not-allowed;
    opacity: 0.6;
}

.search-icon-button.loading .spinner[b-p9rceq5eb4] {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
}

/* Content Area */
.content[b-p9rceq5eb4] {
    background: #ffffff;
    min-height:100vh;
    padding: 0;
    border-radius: 0px 0px 10px 10px;
}

.results-area[b-p9rceq5eb4] {
    padding: 1rem;
}

/* Alert Messages */
.alert-message[b-p9rceq5eb4] {
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    text-align: center;
}

.alert-message.info[b-p9rceq5eb4] {
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    color: #718096;
}

.alert-message.error[b-p9rceq5eb4] {
    background: #fed7d7;
    border: 1px solid #feb2b2;
    color: #c53030;
    border-left: 4px solid #f56565;
}

.alert-message h4[b-p9rceq5eb4] {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    font-size: 1.125rem;
}

.alert-message p[b-p9rceq5eb4] {
    margin: 0;
    font-size: 1rem;
}

/* Customer Data Section */
.customer-data-section[b-p9rceq5eb4] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease;
}

.customer-data-section:hover[b-p9rceq5eb4] {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.results-header[b-p9rceq5eb4] {
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.results-header h3[b-p9rceq5eb4] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #2d3748;
}

.create-pipeline-btn[b-p9rceq5eb4] {
    background: linear-gradient(135deg, #667eea 0%, #5a67d8 100%);
    color: #ffffff;
    border: none;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

.create-pipeline-btn:hover[b-p9rceq5eb4] {
    background: linear-gradient(135deg, #5a67d8 0%, #4c51bf 100%);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
}

/* Pagination Controls */
.pagination-info p[b-p9rceq5eb4] {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 0;
}

.pagination-controls[b-p9rceq5eb4] {
    display: flex;
    gap: 8px;
    padding:10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    will-change: transform;
}

.pagination-btn[b-p9rceq5eb4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 30px;
    border: 2px solid #e5e7eb;
    background: #ffffff;
    color: #6b7280;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    will-change: transform, background-color;
}

    .pagination-btn:hover:not(.disabled)[b-p9rceq5eb4] {
        background: linear-gradient(145deg, #333333, #555555);
        color: #ffffff;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

    .pagination-btn.active[b-p9rceq5eb4] {
        background: linear-gradient(145deg, #4b5563, #6b7280);
        color: #ffffff;
        border-color: transparent;
        box-shadow: 0 4px 12px rgba(75, 85, 99, 0.4);
        border: 2px solid rgba(255, 255, 255, 0.2);
    }

        .pagination-btn.active:hover[b-p9rceq5eb4] {
            background: linear-gradient(145deg, #6b7280, #9ca3af);
            color: #ffffff;
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(75, 85, 99, 0.5);
            border-color: rgba(255, 255, 255, 0.3);
        }

    .pagination-btn.disabled[b-p9rceq5eb4] {
        opacity: 0.4;
        cursor: not-allowed;
        background: linear-gradient(145deg, #6b7280, #9ca3af); /* Adjusted for better visibility when disabled */
        color: #d1d5db;
        transform: none !important;
        box-shadow: none !important;
    }

/* Table Styling */
.table-wrapper[b-p9rceq5eb4] {
    overflow-x: auto;
}

.customer-table[b-p9rceq5eb4] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    table-layout: fixed; /* Enable fixed table layout for column control */
}

    .customer-table th[b-p9rceq5eb4] {
        background: linear-gradient(135deg, #000000 0%, #2d2f45 100%);
        color: #ffffff;
        padding: 0.5rem 0.5rem;
        text-align: left;
        font-weight: 600;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        position: sticky;
        top: 0;
    }

    /* Set specific column widths */
    .customer-table th:nth-child(1)[b-p9rceq5eb4], /* Customer Number */
    .customer-table td:nth-child(1)[b-p9rceq5eb4] {
        width: 10%;
    }

    .customer-table th:nth-child(2)[b-p9rceq5eb4], /* Email */
    .customer-table td:nth-child(2)[b-p9rceq5eb4] {
        width: 20%; /* Wider for email */
        word-break: break-all;
        overflow-wrap: break-word;
    }

    .customer-table th:nth-child(3)[b-p9rceq5eb4], /* Market */
    .customer-table td:nth-child(3)[b-p9rceq5eb4] {
        width: 8%;
    }

    .customer-table th:nth-child(4)[b-p9rceq5eb4], /* CLV */
    .customer-table td:nth-child(4)[b-p9rceq5eb4] {
        width: 9%;
    }

    .customer-table th:nth-child(5)[b-p9rceq5eb4], /* CLV RFM */
    .customer-table td:nth-child(5)[b-p9rceq5eb4] {
        width: 9%;
    }

    .customer-table th:nth-child(6)[b-p9rceq5eb4], /* Classification */
    .customer-table td:nth-child(6)[b-p9rceq5eb4] {
        width: 10%;
    }

    .customer-table th:nth-child(7)[b-p9rceq5eb4], /* Level */
    .customer-table td:nth-child(7)[b-p9rceq5eb4] {
        width: 8%;
    }

    .customer-table th:nth-child(8)[b-p9rceq5eb4], /* District */
    .customer-table td:nth-child(8)[b-p9rceq5eb4] {
        width: 12%;
    }

    .customer-table th:nth-child(9)[b-p9rceq5eb4], /* Seller */
    .customer-table td:nth-child(9)[b-p9rceq5eb4] {
        width: 7%;
    }

    .customer-table th:nth-child(10)[b-p9rceq5eb4], /* Last Order */
    .customer-table td:nth-child(10)[b-p9rceq5eb4] {
        width: 7%;
    }

.customer-table td[b-p9rceq5eb4] {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid #f1f5f9;
    color: #2d3748;
    font-size: 0.7rem;
}

.customer-table tbody tr[b-p9rceq5eb4] {
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.customer-table tbody tr:nth-child(even)[b-p9rceq5eb4] {
    background: #f9fafb;
}

.customer-table tbody tr:hover[b-p9rceq5eb4] {
    background: #f7fafc;
    cursor: pointer;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.customer-table tbody tr:last-child td[b-p9rceq5eb4] {
    border-bottom: none;
}

.text-center[b-p9rceq5eb4] {
    text-align: center;
}

/* Action Button */
.action-button[b-p9rceq5eb4] {
    background: linear-gradient(135deg, #ffffff 0%, #f7fafc 100%);
    color: #2d3748;
    border: 1px solid #e2e8f0;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-button:hover[b-p9rceq5eb4] {
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    border-color: #667eea;
    color: #667eea;
    transform: translateY(-1px);
}

.action-button.disabled[b-p9rceq5eb4] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

.action-button.disabled:hover[b-p9rceq5eb4] {
    background: linear-gradient(135deg, #ffffff 0%, #f7fafc 100%);
    border-color: #e2e8f0;
    color: #2d3748;
    transform: none;
}

/* Modal Styling */
.modal-overlay[b-p9rceq5eb4] {
    position: fixed;
    top: 0;
    left: 100px;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal-dialog[b-p9rceq5eb4] {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    animation: modalAppear-b-p9rceq5eb4 0.2s ease-out;
    position: relative;
    z-index: 1001;
    pointer-events: auto;
}

@keyframes modalAppear-b-p9rceq5eb4 {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-header[b-p9rceq5eb4] {
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    margin-top:1rem;
    align-items: center;
    justify-content: space-between;
}

.modal-header h3[b-p9rceq5eb4] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #2d3748;
}

.modal-close-btn[b-p9rceq5eb4] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #a0aec0;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.modal-close-btn:hover[b-p9rceq5eb4] {
    background: #edf2f7;
    color: #2d3748;
}

.modal-close-btn.disabled[b-p9rceq5eb4] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.modal-close-btn.disabled:hover[b-p9rceq5eb4] {
    background: none;
    color: #a0aec0;
}

.modal-body[b-p9rceq5eb4] {
    padding: 1.5rem;
}

.modal-footer[b-p9rceq5eb4] {
    display: none;
}

/* Form Elements */
.form-group[b-p9rceq5eb4] {
    margin-bottom: 1.5rem;
}

.form-group label[b-p9rceq5eb4] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #2d3748;
}

.form-input[b-p9rceq5eb4],
.form-select[b-p9rceq5eb4] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    background: #ffffff;
    transition: border-color 0.2s ease;
}

.form-input:focus[b-p9rceq5eb4],
.form-select:focus[b-p9rceq5eb4] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Radio Group */
.radio-group[b-p9rceq5eb4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.radio-item[b-p9rceq5eb4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #ffffff;
}

.radio-item:hover[b-p9rceq5eb4] {
    background: #f9fafb;
    border-color: #667eea;
}

.radio-item input[type="radio"][b-p9rceq5eb4] {
    margin: 0;
    accent-color: #667eea;
}

.radio-item label[b-p9rceq5eb4] {
    margin: 0;
    cursor: pointer;
    font-weight: 500;
    color: #2d3748;
}

/* Spinner */
.spinner[b-p9rceq5eb4] {
    width: 1rem;
    height: 1rem;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin-b-p9rceq5eb4 1s linear infinite;
}

@keyframes spin-b-p9rceq5eb4 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Flag Icons */
.flag-icon[b-p9rceq5eb4] {
    width: 20px;
    height: 15px;
    margin-right: 0.5rem;
    display: inline-block;
    border-radius: 2px;
    object-fit: cover;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hero[b-p9rceq5eb4] {
        padding: 2rem 1rem;
    }

    .hero-title[b-p9rceq5eb4] {
        font-size: 1.5rem;
    }

    .controls-bar[b-p9rceq5eb4] {
        padding: 1rem;
    }

    .search-container[b-p9rceq5eb4] {
        max-width: 100%;
    }

    .search-input-wrapper[b-p9rceq5eb4] {
        min-width: 280px;
        margin: 0 1rem;
    }

    .results-area[b-p9rceq5eb4] {
        padding: 1rem;
    }

    .results-header[b-p9rceq5eb4] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

        .results-header h3[b-p9rceq5eb4] {
            text-align: center;
        }

    .pagination-controls[b-p9rceq5eb4] {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .pagination-btn[b-p9rceq5eb4]{
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
        font-size: 0.7rem;
        width: 15px;
        height: 15px;
    }

    
    .pagination-info[b-p9rceq5eb4] {
        font-size: 0.8rem;
        padding: 0 0.5rem;
    }
    
    .modal-dialog[b-p9rceq5eb4] {
        width: 95%;
        margin: 1rem;
    }
    
    .modal-body[b-p9rceq5eb4] {
        padding: 1rem;
    }
    
    .modal-footer[b-p9rceq5eb4] {
        display: none;
    }
    
    .table-wrapper[b-p9rceq5eb4] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .customer-table[b-p9rceq5eb4] {
        min-width: 700px;
    }
    
    .customer-table th[b-p9rceq5eb4],
    .customer-table td[b-p9rceq5eb4] {
        padding: 0.5rem;
        font-size: 0.75rem;
        white-space: nowrap;
    }
}

/* Utility Classes */
.font-weight-bold[b-p9rceq5eb4] {
    font-weight: 700;
}

.positive[b-p9rceq5eb4] {
    color: #48bb78;
    font-weight: 600;
}

.negative[b-p9rceq5eb4] {
    color: #f56565;
    font-weight: 600;
}

/* Action Buttons Container */
.action-buttons[b-p9rceq5eb4] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Analytics Button */
.analytics-btn[b-p9rceq5eb4] {
    background: linear-gradient(135deg, #000000 0%, #2d2f45 100%);
    color: #ffffff;
    border: none;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(66, 153, 225, 0.3);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .analytics-btn:hover[b-p9rceq5eb4] {
        background: linear-gradient(135deg, #000000cc 0%, #000000 100%);
        color: #ffffff;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(66, 153, 225, 0.4);
    }

.analytics-btn svg[b-p9rceq5eb4] {
    width: 16px;
    height: 16px;
}

/* Customer Insights Modal */
.insights-modal[b-p9rceq5eb4] {
    max-width: 1600px;
    min-height: 100vh;
    position: relative;
    z-index: 1002;
    pointer-events: auto;
}

.ai-insights-content-wrapper[b-p9rceq5eb4] {
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f7fafc;
    -webkit-overflow-scrolling: touch;
}

.ai-insights-content-wrapper[b-p9rceq5eb4]::-webkit-scrollbar {
    width: 8px;
}

.ai-insights-content-wrapper[b-p9rceq5eb4]::-webkit-scrollbar-track {
    background: #f7fafc;
    border-radius: 4px;
}

.ai-insights-content-wrapper[b-p9rceq5eb4]::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}

.ai-insights-content-wrapper[b-p9rceq5eb4]::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* Loading Section */
.loading-section[b-p9rceq5eb4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 1rem;
    text-align: center;
}

.loading-section p[b-p9rceq5eb4] {
    color: #6b7280;
    font-size: 1rem;
    margin: 0;
}

/* Insights Container */
.insights-container[b-p9rceq5eb4] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Key Findings and Recommendations Sections */
.insight-section[b-p9rceq5eb4] {
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.insight-section.key-findings[b-p9rceq5eb4] {
    background: linear-gradient(135deg, #f0fff4 0%, #f7fafc 100%);
}

.insight-section.recommendations[b-p9rceq5eb4] {
    background: linear-gradient(135deg, #ebf8ff 0%, #f7fafc 100%);
}

.insight-section h4[b-p9rceq5eb4] {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #2d3748;
}

.insight-section p[b-p9rceq5eb4] {
    margin: 0;
    line-height: 1.6;
    color: #4a5568;
    font-size: 1rem;
}

/* Insights Grid */
.insights-grid[b-p9rceq5eb4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

/* Insight Cards */
.insight-card[b-p9rceq5eb4] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.25rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.insight-card:hover[b-p9rceq5eb4] {
    border-color: #cbd5e0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.insight-card h5[b-p9rceq5eb4] {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.insight-card p[b-p9rceq5eb4] {
    margin: 0;
    line-height: 1.5;
    color: #4a5568;
    font-size: 0.9rem;
}

/* Special styling for opportunities and risk factors */
.insight-card.opportunities[b-p9rceq5eb4] {
    background: linear-gradient(135deg, #f0fff4 0%, #ffffff 100%);
}

.insight-card.opportunities h5[b-p9rceq5eb4] {
    color: #2f855a;
}

.insight-card.risk-factors[b-p9rceq5eb4] {
    background: linear-gradient(135deg, #fed7d7 0%, #ffffff 100%);
}

.insight-card.risk-factors h5[b-p9rceq5eb4] {
    color: #c53030;
}

/* Mobile Responsive for Customer Insights */
@media (max-width: 768px) {
    .action-buttons[b-p9rceq5eb4] {
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }

    .analytics-btn[b-p9rceq5eb4] {
        justify-content: center;
    }

    .insights-modal[b-p9rceq5eb4] {
        width: 100%;
        margin: auto;
        max-height: 80vh;
        padding-top: 1rem;
    }

    .modal-overlay[b-p9rceq5eb4] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        backdrop-filter: blur(4px);
    }

    .ai-insights-content-wrapper[b-p9rceq5eb4] {
        padding: 1rem;
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .insights-grid[b-p9rceq5eb4] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .insight-section[b-p9rceq5eb4] {
        padding: 1rem;
    }

    .insight-card[b-p9rceq5eb4] {
        padding: 1rem;
    }

    .insight-section h4[b-p9rceq5eb4] {
        font-size: 1.125rem;
    }

    .insight-card h5[b-p9rceq5eb4] {
        font-size: 0.9rem;
    }

    .insight-section p[b-p9rceq5eb4],
    .insight-card p[b-p9rceq5eb4] {
        font-size: 0.85rem;
    }
}

/* Charts Section */
.charts-section[b-p9rceq5eb4] {
    margin-top: 2rem;
    padding: 1.5rem;
    border-radius: 12px;
}

.charts-section h4[b-p9rceq5eb4] {
    margin: 0 0 1.5rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #2d3748;
    text-align: center;
}

.charts-grid[b-p9rceq5eb4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-top: 1rem;
}

.chart-container[b-p9rceq5eb4] {
    background: #ffffff;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    transition: box-shadow 0.2s ease;
}

.chart-container:hover[b-p9rceq5eb4] {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.chart-container canvas[b-p9rceq5eb4] {
    max-width: 100%;
    height: 300px !important;
    width: 100% !important;
}

/* Mobile responsive for charts */
@media (max-width: 768px) {
    .charts-grid[b-p9rceq5eb4] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .chart-container[b-p9rceq5eb4] {
        padding: 1rem;
    }
    
    .chart-container canvas[b-p9rceq5eb4] {
        height: 250px !important;
    }
    
    .charts-section[b-p9rceq5eb4] {
        padding: 1rem;
        margin-top: 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* AI CHAT WORKSPACE - ChatGPT-Inspired Modern Design */
/* ═══════════════════════════════════════════════════════════════ */

.insights-container .ai-chat-workspace[b-p9rceq5eb4] {
    margin-top: 2rem;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #d1d5db;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    height: 800px;
    min-height: 700px;
    max-height: 88vh;
    position: relative;
    flex: 1;
}

/* Chat Header */
.insights-container .ai-chat-header[b-p9rceq5eb4] {
    padding: 1.25rem 1.75rem;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.insights-container .ai-chat-header-content[b-p9rceq5eb4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.insights-container .ai-chat-icon[b-p9rceq5eb4] {
    width: 20px;
    height: 20px;
    color: #374151;
}

.insights-container .ai-chat-header h4[b-p9rceq5eb4] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    letter-spacing: -0.01em;
}

.insights-container .ai-chat-subtitle[b-p9rceq5eb4] {
    display: block;
    font-size: 0.8125rem;
    color: #6b7280;
    margin-left: 2rem;
    font-weight: 400;
}

/* Chat Thread Container */
.insights-container .ai-chat-thread[b-p9rceq5eb4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    background: #ffffff;
}

.insights-container .ai-chat-messages-wrapper[b-p9rceq5eb4] {
        flex: 1;
        overflow-y: auto;
    overflow-x: hidden;
    padding: 2rem 0;
        display: flex;
        flex-direction: column;
    gap: 1.5rem;
        background: #ffffff;
        scroll-behavior: smooth;
    min-height: 500px;
    max-height: 100%;
    }

/* Empty State */
.insights-container .ai-chat-empty-state[b-p9rceq5eb4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 3rem 2rem;
    color: #9ca3af;
}

.insights-container .ai-empty-icon[b-p9rceq5eb4] {
    width: 64px;
    height: 64px;
    color: #d1d5db;
    margin-bottom: 1.5rem;
    opacity: 0.6;
}

.insights-container .ai-chat-empty-state h5[b-p9rceq5eb4] {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #4b5563;
}

.insights-container .ai-chat-empty-state p[b-p9rceq5eb4] {
    margin: 0;
    font-size: 0.9375rem;
    color: #9ca3af;
    max-width: 320px;
    line-height: 1.5;
}

/* Message Blocks */
.insights-container .ai-message-block[b-p9rceq5eb4] {
    display: flex;
    width: 100%;
    padding: 0;
    animation: fadeInMessage-b-p9rceq5eb4 0.3s ease-out;
}

@keyframes fadeInMessage-b-p9rceq5eb4 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.insights-container .ai-message-user[b-p9rceq5eb4] {
    justify-content: flex-end;
    padding: 0 2rem;
}

.insights-container .ai-message-assistant[b-p9rceq5eb4] {
    justify-content: flex-start;
    padding: 0;
}

/* Message Bubble */
.insights-container .ai-message-bubble[b-p9rceq5eb4] {
    position: relative;
    max-width: 100%;
}

.insights-container .ai-message-user .ai-message-bubble[b-p9rceq5eb4] {
    max-width: 75%;
}

.insights-container .ai-message-assistant .ai-message-bubble[b-p9rceq5eb4] {
    max-width: 100%;
    padding: 0 6rem;
}

/* Message Content Styling */
.insights-container .ai-message-content[b-p9rceq5eb4] {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #1f2937;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.insights-container .ai-message-user .ai-message-content[b-p9rceq5eb4] {
    background: #f3f4f6;
    padding: 1rem 1.25rem;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    color: #111827;
    font-weight: 450;
}

.insights-container .ai-message-assistant .ai-message-content[b-p9rceq5eb4] {
    padding: 0.5rem 0;
    background: transparent;
}

/* Typography in Messages */
.insights-container .ai-message-content h4[b-p9rceq5eb4],
.insights-container .ai-message-content h5[b-p9rceq5eb4] {
    margin: 2rem 0 1rem 0;
    font-weight: 600;
    color: #111827;
    letter-spacing: -0.015em;
    line-height: 1.4;
}

.insights-container .ai-message-content h4:first-child[b-p9rceq5eb4],
.insights-container .ai-message-content h5:first-child[b-p9rceq5eb4] {
    margin-top: 0;
}

.insights-container .ai-message-content h4[b-p9rceq5eb4] {
    font-size: 1.125rem;
    margin-bottom: 1.25rem;
}

.insights-container .ai-message-content h5[b-p9rceq5eb4] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.insights-container .ai-message-content p[b-p9rceq5eb4] {
    margin: 0 0 1rem 0;
    line-height: 1.65;
}

.insights-container .ai-message-content p:last-child[b-p9rceq5eb4] {
    margin-bottom: 0;
}

.insights-container .ai-message-content strong[b-p9rceq5eb4] {
    font-weight: 600;
    color: #111827;
}

.insights-container .ai-message-content ul[b-p9rceq5eb4],
.insights-container .ai-message-content ol[b-p9rceq5eb4] {
    margin: 0.75rem 0 1rem 0;
    padding-left: 1.5rem;
}

.insights-container .ai-message-content li[b-p9rceq5eb4] {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.insights-container .ai-message-content li:last-child[b-p9rceq5eb4] {
    margin-bottom: 0;
}

/* ===================================================================
   HB-* AI-AUTHORED CONTENT CLASSES (Token Streaming Compatible)
   =================================================================== */

/* Grid Layout for Cards/Metrics */
.hb-grid[b-p9rceq5eb4] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin: 1rem 0;
}

/* Card Component */
.hb-card[b-p9rceq5eb4] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding:0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.2s ease;
}

.hb-card:hover[b-p9rceq5eb4] {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* Metric Display */
.hb-metric[b-p9rceq5eb4] {
    display: grid;
    gap: 0.25rem;
}

.hb-metric .label[b-p9rceq5eb4] {
    color: #6b7280;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 500;
}

.hb-metric .value[b-p9rceq5eb4] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

/* Lists - AI Authored - FORCE OVERRIDE BOOTSTRAP */
.insights-container ul.hb-list[b-p9rceq5eb4],
.insights-container ol.hb-list[b-p9rceq5eb4] {
    margin: 1rem 0 !important;
    padding-left: 1.5rem !important;
    list-style-position: outside !important;
}

.insights-container ul.hb-list.hb-bullets[b-p9rceq5eb4] {
    list-style-type: disc !important;
}

.insights-container ul.hb-list li[b-p9rceq5eb4],
.insights-container ol.hb-list li[b-p9rceq5eb4] {
    margin: 0.5rem 0 !important;
    line-height: 1.6 !important;
    color: #1f2937 !important;
    padding-left: 0.25rem !important;
}

/* ═══════════════════════════════════════════════════════════════
   AI CHAT OUTPUT ISOLATION ISLAND - Bootstrap/Reboot-Free Zone
   This creates a CSS boundary that Bootstrap cannot cross
   ═══════════════════════════════════════════════════════════════ */

/* Nuclear reset: Remove ALL inherited Bootstrap/Reboot styles */
.insights-container .ai-message-content.chat-output[b-p9rceq5eb4] {
    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;
}

/* Restore basic HTML elements inside the isolation island */
/* Use ::deep to pierce Blazor scope for JS-injected content */
.insights-container[b-p9rceq5eb4]  * {
    box-sizing: border-box;
}

.insights-container[b-p9rceq5eb4]  p {
    display: block;
    margin: 0 0 1rem 0;
    line-height: 1.65;
}

.insights-container[b-p9rceq5eb4]  strong {
    font-weight: 600;
    color: #111827;
}

.insights-container[b-p9rceq5eb4]  em {
    font-style: italic;
}

.insights-container[b-p9rceq5eb4]  h4,
.insights-container[b-p9rceq5eb4]  h5 {
    display: block;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
}

.insights-container[b-p9rceq5eb4]  h4 {
    font-size: 1.125rem;
}

.insights-container[b-p9rceq5eb4]  h5 {
    font-size: 1rem;
}

/* Mobile responsive for HB-* classes */
@media (max-width: 768px) {
    .hb-grid[b-p9rceq5eb4] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .hb-table[b-p9rceq5eb4] {
        font-size: 0.85rem;
        overflow-x: auto;
        display: block;
    }
    
    .hb-table thead th[b-p9rceq5eb4],
    .hb-table tbody td[b-p9rceq5eb4] {
        padding: 0.625rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .hb-metric .value[b-p9rceq5eb4] {
        font-size: 1.25rem;
    }
}

/* Typing Indicator */
.insights-container .ai-typing-indicator[b-p9rceq5eb4] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0;
}

.insights-container .ai-typing-dot[b-p9rceq5eb4] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #9ca3af;
    animation: typingBounce-b-p9rceq5eb4 1.4s infinite ease-in-out;
}

.insights-container .ai-typing-dot:nth-child(1)[b-p9rceq5eb4] {
    animation-delay: -0.32s;
}

.insights-container .ai-typing-dot:nth-child(2)[b-p9rceq5eb4] {
    animation-delay: -0.16s;
}

@keyframes typingBounce-b-p9rceq5eb4 {
    0%, 80%, 100% {
        opacity: 0.4;
        transform: scale(0.8);
    }
    40% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Chat Input Container */
.insights-container .ai-chat-input-container[b-p9rceq5eb4] {
    padding: 1.25rem 1.75rem 1.5rem 1.75rem;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.insights-container .ai-chat-input-wrapper[b-p9rceq5eb4] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    background: #ffffff;
    border: 1.5px solid #d1d5db;
    border-radius: 24px;
    padding: 0.625rem 0.75rem 0.625rem 1.125rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 52px;
    max-height: 200px;
}

.insights-container .ai-chat-input-wrapper:focus-within[b-p9rceq5eb4] {
    border-color: #9ca3af;
    box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.1);
}

.insights-container .ai-chat-textarea[b-p9rceq5eb4] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: #111827;
    font-size: 0.9375rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    resize: none;
    min-height: 24px;
    max-height: 150px;
    line-height: 1.5;
    padding: 0.375rem 0;
}

.insights-container .ai-chat-textarea[b-p9rceq5eb4]::placeholder {
    color: #9ca3af;
}

.insights-container .ai-chat-textarea:disabled[b-p9rceq5eb4] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Submit Button */
.insights-container .ai-chat-submit-btn[b-p9rceq5eb4] {
    background: #10b981;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.insights-container .ai-chat-submit-btn:hover:not(:disabled):not(.ai-btn-disabled)[b-p9rceq5eb4] {
    background: #059669;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.insights-container .ai-chat-submit-btn:active:not(:disabled):not(.ai-btn-disabled)[b-p9rceq5eb4] {
    transform: scale(0.95);
}

.insights-container .ai-chat-submit-btn.ai-btn-disabled[b-p9rceq5eb4] {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
}

.insights-container .ai-chat-submit-btn.ai-btn-loading[b-p9rceq5eb4] {
    background: #6b7280;
    cursor: wait;
}

.insights-container .ai-btn-spinner[b-p9rceq5eb4] {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: buttonSpin-b-p9rceq5eb4 0.8s linear infinite;
}

@keyframes buttonSpin-b-p9rceq5eb4 {
    to {
        transform: rotate(360deg);
    }
}

/* Scrollbar Styling - ChatGPT Style */
.insights-container .ai-chat-messages-wrapper[b-p9rceq5eb4] {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db #f9fafb;
}

.insights-container .ai-chat-messages-wrapper[b-p9rceq5eb4]::-webkit-scrollbar {
    width: 6px;
}

.insights-container .ai-chat-messages-wrapper[b-p9rceq5eb4]::-webkit-scrollbar-track {
    background: #f9fafb;
    border-radius: 3px;
}

.insights-container .ai-chat-messages-wrapper[b-p9rceq5eb4]::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
    border: none;
}

.insights-container .ai-chat-messages-wrapper[b-p9rceq5eb4]::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

.insights-container .ai-chat-textarea[b-p9rceq5eb4] {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.insights-container .ai-chat-textarea[b-p9rceq5eb4]::-webkit-scrollbar {
    width: 4px;
}

.insights-container .ai-chat-textarea[b-p9rceq5eb4]::-webkit-scrollbar-track {
    background: transparent;
}

.insights-container .ai-chat-textarea[b-p9rceq5eb4]::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 2px;
}

.insights-container .ai-chat-textarea[b-p9rceq5eb4]::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Animations */
@keyframes fadeInUp-b-p9rceq5eb4 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes messageSlide-b-p9rceq5eb4 {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse-b-p9rceq5eb4 {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* RESPONSIVE DESIGN - Mobile & Tablet */
/* ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .insights-container .ai-chat-workspace[b-p9rceq5eb4] {
        height: 750px;
        min-height: 650px;
    }

    .insights-container .ai-message-user[b-p9rceq5eb4] {
        padding: 0 1.5rem;
    }

    .insights-container .ai-message-assistant .ai-message-bubble[b-p9rceq5eb4] {
        padding: 0 4rem;
    }
}

@media (max-width: 768px) {
    .insights-container .ai-chat-workspace[b-p9rceq5eb4] {
        height: 650px;
        min-height: 550px;
        border-radius: 12px;
        margin-top: 1.5rem;
    }

    .insights-container .ai-chat-header[b-p9rceq5eb4] {
        padding: 1rem 1.25rem;
    }

    .insights-container .ai-chat-header h4[b-p9rceq5eb4] {
        font-size: 1rem;
    }

    .insights-container .ai-chat-subtitle[b-p9rceq5eb4] {
        font-size: 0.75rem;
    }

    .insights-container .ai-chat-messages-wrapper[b-p9rceq5eb4] {
        padding: 1.5rem 0;
        gap: 1.25rem;
        min-height: 400px;
    }

    .insights-container .ai-message-user[b-p9rceq5eb4] {
        padding: 0 1rem;
    }

    .insights-container .ai-message-assistant .ai-message-bubble[b-p9rceq5eb4] {
        padding: 0 2rem;
    }

    .insights-container .ai-message-content[b-p9rceq5eb4] {
        font-size: 0.875rem;
    }

    .insights-container .ai-message-content h4[b-p9rceq5eb4] {
        font-size: 1rem;
    }

    .insights-container .ai-message-content h5[b-p9rceq5eb4] {
        font-size: 0.875rem;
    }

    /* Mobile table styles - pierce scope with ::deep */
    .insights-container[b-p9rceq5eb4]  table.hb-table {
        font-size: 0.8125rem;
    }

    .insights-container[b-p9rceq5eb4]  table.hb-table th,
    .insights-container[b-p9rceq5eb4]  table.hb-table td {
        padding: 0.75rem 1rem;
        font-size: 0.8125rem;
    }

    .insights-container .ai-chat-input-container[b-p9rceq5eb4] {
        padding: 1rem 1.25rem 1.25rem 1.25rem;
    }

    .insights-container .ai-chat-input-wrapper[b-p9rceq5eb4] {
        padding: 0.5rem 0.625rem 0.5rem 1rem;
    }

    .insights-container .ai-chat-textarea[b-p9rceq5eb4] {
        font-size: 0.875rem;
    }

    .insights-container .ai-chat-submit-btn[b-p9rceq5eb4] {
        width: 34px;
        height: 34px;
    }
}

@media (max-width: 640px) {
    .insights-container .ai-chat-workspace[b-p9rceq5eb4] {
        height: 600px;
        min-height: 500px;
    }

    .insights-container .ai-message-user[b-p9rceq5eb4] {
        padding: 0 0.75rem;
    }

    .insights-container .ai-message-assistant .ai-message-bubble[b-p9rceq5eb4] {
        padding: 0 1rem;
    }

    .insights-container .ai-message-user .ai-message-bubble[b-p9rceq5eb4] {
        max-width: 90%;
    }

    /* Smallest mobile table styles - pierce scope with ::deep */
    .insights-container[b-p9rceq5eb4]  table.hb-table {
        font-size: 0.75rem;
    }

    .insights-container[b-p9rceq5eb4]  table.hb-table th,
    .insights-container[b-p9rceq5eb4]  table.hb-table td {
        padding: 0.625rem 0.75rem;
        font-size: 0.75rem;
    }
}


.insights-container > *:last-child[b-p9rceq5eb4] {
    margin-bottom: 0;
}

/* /Pages/CustomerClassification.razor.rz.scp.css */
/* Add styles from previous component if they were general, or keep specific here */
.lv-checkbox-label.disabled[b-1bmaod47ll] {
    color: var(--lv-text-disabled);
    cursor: not-allowed;
}

.hero[b-1bmaod47ll] {
    padding: calc(var(--lv-spacing-unit) * 2) calc(var(--lv-spacing-unit) * 2);
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border-bottom: 1px solid var(--lv-border-primary);
    text-align: center;
    flex-shrink: 0;
    border-radius: 10px 10px 0px 0px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.hero-title[b-1bmaod47ll] {
    font-family: var(--lv-font-heading);
    color: var(--lv-text-primary);
    margin: 0 0 calc(var(--lv-spacing-unit) * 1.5) 0;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hero-subtitle[b-1bmaod47ll] {
    color: var(--lv-text-secondary);
    margin: 0;
    font-size: 1.125rem;
    line-height: var(--lv-line-height-base);
}

.controls-bar[b-1bmaod47ll] {
    padding: calc(var(--lv-spacing-unit) * 2) calc(var(--lv-spacing-unit) * 3);
    background: linear-gradient(135deg, #ffffff, #f9fafb);
    border-bottom: 1px solid var(--lv-border-primary);
    display: flex;
    align-items: center;
    padding: 20px;
    justify-content: space-between;
    border-radius: 12px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.lv-button-filter-toggle[b-1bmaod47ll] {
    background: linear-gradient(145deg, var(--lv-background-accent), var(--lv-hover-accent));
    color: var(--lv-text-inverted);
    border: 2px solid transparent;
    padding: calc(var(--lv-spacing-unit) * 1.2) calc(var(--lv-spacing-unit) * 2);
    border-radius: var(--lv-border-radius);
    cursor: pointer;
    font-size: var(--lv-font-size-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: var(--lv-spacing-unit);
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.lv-button-filter-toggle[b-1bmaod47ll]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.lv-button-filter-toggle:hover[b-1bmaod47ll]::before {
    left: 100%;
}

.lv-button-filter-toggle:hover[b-1bmaod47ll] {
    background: linear-gradient(145deg, var(--lv-hover-accent), #4c51bf);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 20px rgba(102, 126, 234, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.lv-view-button.is-disabled[disabled][b-1bmaod47ll] {
    opacity: .6;
    cursor: not-allowed;
    pointer-events: none;
}

.lv-button-filter-toggle .chevron[b-1bmaod47ll] {
    font-weight: bold;
    font-size: var(--lv-font-size-base);
    transition: transform 0.3s ease;
}

/* View Buttons Container */
.view-buttons-container[b-1bmaod47ll] {
    display: flex;
    gap: calc(var(--lv-spacing-unit) * 1.5);
    align-items: center;
}

.lv-view-button[b-1bmaod47ll] {
    background: linear-gradient(145deg, #ffffff, #f3f4f6);
    color: var(--lv-text-secondary);
    border: 2px solid var(--lv-border-primary);
    padding: calc(var(--lv-spacing-unit) * 1.2) calc(var(--lv-spacing-unit) * 2);
    border-radius: var(--lv-border-radius);
    cursor: pointer;
    font-size: var(--lv-font-size-small);
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
}

.lv-view-button[b-1bmaod47ll]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
    transition: left 0.5s ease;
}

.lv-view-button:hover[b-1bmaod47ll]::before {
    left: 100%;
}

.lv-view-button:hover[b-1bmaod47ll] {
    background: linear-gradient(145deg, #f9fafb, #f1f5f9);
    border-color: var(--lv-background-accent);
    color: var(--lv-background-accent);
    transform: translateY(-1px);
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.lv-view-button.active[b-1bmaod47ll] {
    background: linear-gradient(145deg, var(--lv-background-accent), var(--lv-hover-accent));
    color: var(--lv-text-inverted);
    border-color: var(--lv-background-accent);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.lv-view-button.active:hover[b-1bmaod47ll] {
    background: linear-gradient(145deg, var(--lv-hover-accent), #4c51bf);
    transform: translateY(-1px);
    box-shadow: 
        0 6px 16px rgba(102, 126, 234, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.content[b-1bmaod47ll] {
    padding-top: 0;
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    width: 100%;
    border-radius: 0px 0px 10px 10px;
    background-color: var(--lv-background-secondary);
}

.filters-sidebar[b-1bmaod47ll] {
    padding: calc(var(--lv-spacing-unit) * 3);
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border-right: 1px solid var(--lv-border-primary);
    width: 300px;
    transition: width 0.1s ease-out, opacity 0.1s ease-out, padding 0.1s ease-out;
    overflow-x: hidden;
    overflow-y: auto;
    flex-shrink: 0;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
    position: relative;
}

.filters-sidebar.hidden[b-1bmaod47ll] {
    width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    opacity: 0;
    border-right: none !important;
}

.sidebar-header[b-1bmaod47ll] {
    margin-bottom: calc(var(--lv-spacing-unit) * 3);
    padding-bottom: calc(var(--lv-spacing-unit) * 2);
    border-bottom: 1px solid var(--lv-border-primary);
}

.sidebar-title[b-1bmaod47ll] {
    font-family: var(--lv-font-heading);
    font-size: var(--lv-font-size-large);
    font-weight: 700;
    color: var(--lv-text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

.filter-group[b-1bmaod47ll] {
    margin-bottom: calc(var(--lv-spacing-unit) * 3);
}

.filter-group h6[b-1bmaod47ll] {
    font-size: var(--lv-font-size-base);
    font-weight: 700;
    margin-bottom: calc(var(--lv-spacing-unit) * 1.5);
    color: var(--lv-text-primary);
    letter-spacing: -0.01em;
}

.button-group[b-1bmaod47ll] {
    margin-bottom: var(--lv-spacing-unit);
    display: flex;
    gap: var(--lv-spacing-unit);
}

.lv-button-filter-control[b-1bmaod47ll] {
    background-color: var(--lv-background-secondary);
    color: var(--lv-text-primary);
    border: 1px solid var(--lv-border-secondary);
    padding: calc(var(--lv-spacing-unit) * 0.5) var(--lv-spacing-unit);
    border-radius: var(--lv-border-radius);
    font-size: var(--lv-font-size-small);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

    .lv-button-filter-control:hover[b-1bmaod47ll] {
        background-color: var(--lv-hover-background);
        border-color: var(--lv-text-secondary);
    }

/* Filter Dropdown Styles - Enhanced with CustomerSearchComponent styling */
.filter-dropdown[b-1bmaod47ll] {
    position: relative;
    width: 100%;
    z-index: 100;
    margin-bottom: 12px;
}

/* When a dropdown is open, it gets higher z-index to appear above others */
.filter-dropdown.open[b-1bmaod47ll] {
    z-index: 5000;
}

/* Ensure the dropdown menu in open state appears above all other elements */
.filter-dropdown.open .filter-dropdown-menu[b-1bmaod47ll] {
    z-index: 5001;
}

.filter-dropdown-header[b-1bmaod47ll] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--lv-spacing-unit) * 1.5) calc(var(--lv-spacing-unit) * 2);
    border: 1px solid var(--lv-border-primary);
    border-radius: var(--lv-border-radius);
    background: linear-gradient(145deg, #ffffff, #f9fafb);
    font-size: var(--lv-font-size-base);
    font-weight: 500;
    color: var(--lv-text-primary);
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    position: relative;
    overflow: hidden;
}

.filter-dropdown-header[b-1bmaod47ll]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent);
    transition: left 0.5s ease;
}

.filter-dropdown-header:hover[b-1bmaod47ll]::before {
    left: 100%;
}

.filter-dropdown-header:hover[b-1bmaod47ll] {
    border-color: var(--lv-background-accent);
    transform: translateY(-1px);
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    background: linear-gradient(145deg, #f9fafb, #f1f5f9);
}

.filter-dropdown-arrow[b-1bmaod47ll] {
    font-size: 12px;
    color: var(--lv-background-accent);
    transition: transform 0.3s ease, color 0.3s ease;
    margin-left: var(--lv-spacing-unit);
}

.filter-dropdown-arrow.rotated[b-1bmaod47ll] {
    transform: rotate(180deg);
    color: var(--lv-hover-accent);
}

.filter-dropdown-menu[b-1bmaod47ll] {
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid var(--lv-background-accent);
    border-top: none;
    border-radius: 0 0 var(--lv-border-radius) var(--lv-border-radius);
    box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.12),
        0 4px 8px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    max-height: 250px;
    overflow-y: auto;
    animation: dropdownSlide-b-1bmaod47ll 0.2s ease-out;
    margin-top: -1px; /* Fix border overlap */
}

/* Animation for dropdown opening */
@keyframes dropdownSlide-b-1bmaod47ll {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.filter-dropdown-item[b-1bmaod47ll] {
    display: flex;
    align-items: center;
    gap: calc(var(--lv-spacing-unit) * 1.5);
    padding: calc(var(--lv-spacing-unit) * 1.5) calc(var(--lv-spacing-unit) * 2);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 11.6px;
    border-bottom: 1px solid var(--lv-border-secondary);
    position: relative;
    overflow: hidden;
    background: #ffffff;
}

.filter-dropdown-item[b-1bmaod47ll]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.02), transparent);
    transition: left 0.3s ease;
}

.filter-dropdown-item:hover[b-1bmaod47ll]::before {
    left: 100%;
}

.filter-dropdown-item:last-child[b-1bmaod47ll] {
    border-bottom: none;
    border-radius: 0 0 var(--lv-border-radius-small) var(--lv-border-radius-small);
}

.filter-dropdown-item:hover[b-1bmaod47ll] {
    background: linear-gradient(145deg, #f9fafb, #f3f4f6);
    box-shadow: inset 2px 0 0 var(--lv-background-accent);
}

/* Custom Checkbox Styles - Enhanced styling */
.custom-checkbox[b-1bmaod47ll] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    outline: none;
    flex-shrink: 0;
    background: linear-gradient(145deg, #ffffff, #f9fafb);
    transition: all 0.2s ease;
    box-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    z-index: 10001;
}

.custom-checkbox:hover[b-1bmaod47ll] {
    border-color: var(--lv-background-accent);
    transform: scale(1.05);
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.custom-checkbox:checked[b-1bmaod47ll] {
    background: linear-gradient(145deg, var(--lv-background-accent), #333333);
    border-color: var(--lv-background-accent);
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.custom-checkbox:checked[b-1bmaod47ll]::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid var(--lv-text-inverted);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-label[b-1bmaod47ll] {
    font-size: var(--lv-font-size-base);
    color: var(--lv-text-primary);
    cursor: pointer;
    user-select: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.checkbox-label:hover[b-1bmaod47ll] {
    color: var(--lv-background-accent);
}

/* Results Area */
.results-area[b-1bmaod47ll] {
    flex-grow: 1;
    padding: calc(var(--lv-spacing-unit) * 3);
    transition: padding-left 0.3s ease-out;
    background-color: var(--lv-background-secondary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.alert-message[b-1bmaod47ll] {
    border: 1px solid var(--lv-border-primary);
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    color: var(--lv-text-secondary);
    text-align: center;
    padding: calc(var(--lv-spacing-unit) * 3);
    border-radius: var(--lv-border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-weight: 500;
}

/* View Container Styles */
.view-container[b-1bmaod47ll] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.table-row[b-1bmaod47ll] {
    display: flex;
    gap: calc(var(--lv-spacing-unit) * 2.5);
    margin-bottom: calc(var(--lv-spacing-unit) * 2.5);
    flex-shrink: 0;
}

.table-card[b-1bmaod47ll] {
    flex: 1;
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border: 1px solid var(--lv-border-primary);
    border-radius: var(--lv-border-radius);
    overflow: hidden;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.table-card:hover[b-1bmaod47ll] {
    transform: translateY(-2px);
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.15),
        0 4px 8px rgba(0, 0, 0, 0.08);
}

.table-card h3[b-1bmaod47ll] {
    font-size: var(--lv-font-size-base);
    margin: 0;
    padding: calc(var(--lv-spacing-unit) * 2);
    background: linear-gradient(135deg, #f9fafb, #ffffff);
    border-bottom: 1px solid var(--lv-border-primary);
    color: var(--lv-text-primary);
    letter-spacing: -0.01em;
}

/* Year Selector Styling */
.year-selector[b-1bmaod47ll] {
    padding: calc(var(--lv-spacing-unit) * 1) calc(var(--lv-spacing-unit) * 2);
    font-size: 13px;
    color: #6b7280;
    background-color: #f9fafb;
    border-bottom: 1px solid var(--lv-border-primary);
    font-style: italic;
}

.customer-data-section[b-1bmaod47ll],
.retention-section[b-1bmaod47ll],
.brand-share-section[b-1bmaod47ll],
.brand-category-section[b-1bmaod47ll] {
    flex-grow: 1;
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border: 1px solid var(--lv-border-primary);
    border-radius: var(--lv-border-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.customer-data-section:hover[b-1bmaod47ll],
.retention-section:hover[b-1bmaod47ll],
.brand-share-section:hover[b-1bmaod47ll],
.brand-category-section:hover[b-1bmaod47ll] {
    transform: translateY(-2px);
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.15),
        0 4px 8px rgba(0, 0, 0, 0.08);
}

.customer-data-section h3[b-1bmaod47ll],
.retention-section h3[b-1bmaod47ll],
.brand-share-section h3[b-1bmaod47ll],
.brand-category-section h3[b-1bmaod47ll] {
    font-size: var(--lv-font-size-base);
    margin: 0;
    padding: calc(var(--lv-spacing-unit) * 2);
    background: linear-gradient(135deg, #f9fafb, #ffffff);
    border-bottom: 1px solid var(--lv-border-primary);
    color: var(--lv-text-primary);
    letter-spacing: -0.01em;
}

.brands-search[b-1bmaod47ll] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

.brands-search-input[b-1bmaod47ll] {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--lv-border-primary);
    border-radius: var(--lv-border-radius-small);
    font-size: var(--lv-font-size-base);
}

.brands-search-clear[b-1bmaod47ll] {
    padding: 6px 10px;
    border: 1px solid var(--lv-border-primary);
    background: var(--lv-background-primary);
    border-radius: var(--lv-border-radius-small);
    cursor: pointer;
    line-height: 1;
}

.brands-modal-empty[b-1bmaod47ll] {
    grid-column: 1 / -1;
    padding: 12px;
    color: var(--lv-text-secondary);
}

.table-wrapper[b-1bmaod47ll] {
    flex-grow: 1;
    overflow: auto;
    display: block;
}

.lv-table[b-1bmaod47ll] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--lv-font-main);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
    border-radius: var(--lv-border-radius);
    overflow: hidden;
    border: 1px solid var(--lv-border-primary);
}

.lv-table th[b-1bmaod47ll], .lv-table td[b-1bmaod47ll] {
    padding: calc(var(--lv-spacing-unit) * 1.5) calc(var(--lv-spacing-unit) * 1.2);
    border: none;
    font-size: 13px;
    border-bottom: 1px solid var(--lv-border-secondary);
    text-align: left;
    vertical-align: middle;
    color: var(--lv-text-primary);
}

.lv-table th[b-1bmaod47ll] {
    position: relative;
}

.lv-table th:not(:first-child)[b-1bmaod47ll]::before, 
.lv-table td:not(:first-child)[b-1bmaod47ll]::before {
    content: '';
    position: absolute;
    top: 25%;
    left: 0;
    height: 50%;
    width: 1px;
    background-color: rgba(203, 213, 225, 0.5);
}

.lv-table thead th[b-1bmaod47ll] {
    background: linear-gradient(145deg, var(--lv-background-accent), var(--lv-hover-accent));
    color: var(--lv-text-inverted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    font-size:11px;
    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);
    padding: calc(var(--lv-spacing-unit) * 1.8) calc(var(--lv-spacing-unit) * 1.5);
}

.lv-table tbody tr[b-1bmaod47ll] {
    transition: all 0.2s ease;
    background-color: white;
}

.lv-table tbody tr:nth-child(even)[b-1bmaod47ll] {
    background-color: rgba(248, 250, 252, 0.6);
}

.lv-table tbody tr:hover[b-1bmaod47ll] {
    background: linear-gradient(145deg, var(--lv-hover-background), #f3f4f6);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.lv-table tbody tr:last-child td[b-1bmaod47ll] {
    border-bottom: none;
}

/* Special table styles for different views */
.customer-table th[b-1bmaod47ll],
.customer-table td[b-1bmaod47ll] {
    font-size: 12px;
    padding: calc(var(--lv-spacing-unit) * 1.2) calc(var(--lv-spacing-unit) * 1);
}

.brand-table th[b-1bmaod47ll],
.brand-table td[b-1bmaod47ll] {
    font-size: 12.5px;
    padding: calc(var(--lv-spacing-unit) * 1) calc(var(--lv-spacing-unit) * 0.8);
}

/* Status indicators */
.positive[b-1bmaod47ll] {
    color: #10b981;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.positive[b-1bmaod47ll]::before {
    content: "▲";
    font-size: 10px;
    margin-right: 4px;
}

.negative[b-1bmaod47ll] {
    color: #ef4444;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.negative[b-1bmaod47ll]::before {
    content: "▼";
    font-size: 10px;
    margin-right: 4px;
}

.data-total[b-1bmaod47ll] {
    font-weight: 700;
    color: var(--lv-background-accent);
    background-color: rgba(248, 250, 252, 0.8);
}

/* Body totals: subtle grey background, keep inline colors (e.g., green/red) */
.lv-table tbody td.data-total[b-1bmaod47ll],
.lv-table tbody th.data-total[b-1bmaod47ll] {
    font-weight: 700;
    background: #f3f4f6 !important; /* light grey */
    color: inherit; /* no !important so inline color can win */
}

/* Keep the grey visible on row hover */
.lv-table tbody tr:hover td.data-total[b-1bmaod47ll],
.lv-table tbody tr:hover th.data-total[b-1bmaod47ll] {
    background: #e5e7eb !important; /* a bit darker on hover */
}

/* Keep the header TOTAL cell white-on-black (you already have this) */
.lv-table thead th.data-total[b-1bmaod47ll] {
    color: var(--lv-text-inverted) !important;
    background: linear-gradient(145deg, var(--lv-background-accent), var(--lv-hover-accent)) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* Make the divider line visible on grey cells */
.lv-table td.data-total[b-1bmaod47ll]::before,
.lv-table th.data-total[b-1bmaod47ll]::before {
    background-color: rgba(0,0,0,.08);
}

/* Compact tables too */
.compact-table td.data-total[b-1bmaod47ll],
.compact-table th.data-total[b-1bmaod47ll] {
    background: #f3f4f6 !important;
    font-weight: 700;
    color: inherit;
}



.font-weight-bold[b-1bmaod47ll] {
    font-weight: 700 !important;
}

.text-center[b-1bmaod47ll] {
    text-align: center !important;
}

div.page-root.lv-theme[b-1bmaod47ll] {
    font-family: var(--lv-font-main);
    color: var(--lv-text-primary);
    font-size: var(--lv-font-size-base);
    border-radius: 20px;
    line-height: var(--lv-line-height-base);
    background-color: #575e6500 !important;
    background-image: none !important;
    position: relative;
    padding: 0px 50px 50px 50px ;  
    right: 0;
    z-index: 2 !important;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100vh;
    height: auto;
}

/* Mobile Responsive */
@media (max-width: 767px) {
    div.page-root.lv-theme[b-1bmaod47ll] {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background-color: var(--lv-background-secondary) !important;
        background-image: none !important;
        z-index: 2 !important;
        padding: 0;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-height: 100vh !important;
        height: auto !important;
    }

    .hero[b-1bmaod47ll] {
        padding: calc(var(--lv-spacing-unit) * 3) calc(var(--lv-spacing-unit) * 2);
    }

    .controls-bar[b-1bmaod47ll] {
        flex-direction: column;
        gap: calc(var(--lv-spacing-unit) * 2);
        align-items: stretch;
        padding: calc(var(--lv-spacing-unit) * 2);
    }

    .view-buttons-container[b-1bmaod47ll] {
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--lv-spacing-unit);
    }

    .lv-view-button[b-1bmaod47ll] {
        flex: 1;
        min-width: 140px;
    }

    .table-row[b-1bmaod47ll] {
        flex-direction: column;
    }

    .content[b-1bmaod47ll] {
        overflow: visible !important;
        flex-grow: 1;
    }

    .results-area[b-1bmaod47ll] {
        height: auto !important;
        min-height: 0 !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
        padding: calc(var(--lv-spacing-unit) * 2) !important;
    }

    /* Enhanced mobile table styling */
    .table-wrapper[b-1bmaod47ll] {
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        max-height: 60vh !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: calc(var(--lv-spacing-unit) * 2) !important;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
        border-radius: var(--lv-border-radius) !important;
    }
    
    /* Mobile products view - keep height constraint for mobile */
    .products-view .table-wrapper[b-1bmaod47ll] {
        max-height: 60vh !important;
        flex: none !important;
    }

    .lv-table[b-1bmaod47ll] {
        min-width: 800px !important; /* Ensure minimum width to force horizontal scrolling */
        width: auto !important; /* Allow table to expand based on content */
        table-layout: fixed !important; /* Better control over column widths */
    }

    .lv-table th[b-1bmaod47ll] {
        white-space: nowrap !important; /* Prevent header text wrapping */
        position: sticky !important;
        top: 0 !important;
        z-index: 20 !important; /* Higher z-index to ensure visibility */
        font-size: 11px !important;
        padding: calc(var(--lv-spacing-unit) * 1.5) calc(var(--lv-spacing-unit) * 1) !important;
    }

    .lv-table td[b-1bmaod47ll] {
        font-size: 11px !important;
        white-space: nowrap !important; /* Prevent cell text wrapping */
    }

    /* Adjust specific tables for mobile */
    .customer-table[b-1bmaod47ll], .brand-table[b-1bmaod47ll] {
        min-width: 1000px !important; /* These tables need more width */
    }

    .customer-table th[b-1bmaod47ll],
    .customer-table td[b-1bmaod47ll] {
        padding: calc(var(--lv-spacing-unit) * 1) calc(var(--lv-spacing-unit) * 0.8) !important;
    }

    .brand-table th[b-1bmaod47ll],
    .brand-table td[b-1bmaod47ll] {
        padding: calc(var(--lv-spacing-unit) * 0.8) calc(var(--lv-spacing-unit) * 0.6) !important;
    }

    /* Add horizontal scroll indicator */
    .table-card[b-1bmaod47ll], 
    .customer-data-section[b-1bmaod47ll], 
    .retention-section[b-1bmaod47ll],
    .brand-category-section[b-1bmaod47ll],
    .brand-share-section[b-1bmaod47ll] {
        position: relative !important;
        overflow: visible !important;
    }


    @keyframes fadeInOut-b-1bmaod47ll {
        0%, 100% { opacity: 0.4; }
        50% { opacity: 0.8; }
    }

    .filters-sidebar[b-1bmaod47ll] {
        position: fixed !important;
        top: 5rem !important;
        left: 0 !important;
        bottom: 0 !important;
        width: min(320px, 85vw) !important;
        z-index: 10050 !important;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2) !important;
        transition: transform 0.3s ease-out, opacity 0.3s ease-out !important;
        transform: translateX(-100%) !important;
        opacity: 0 !important;
        overflow-y: auto !important;
        background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
        padding: 20px 12px 10px 10px;
    }

    .filters-sidebar.visible[b-1bmaod47ll] {
        transform: translateX(0) !important;
        opacity: 1 !important;
    }

    .mobile-close-btn:hover[b-1bmaod47ll] {
        background: linear-gradient(145deg, #333333, #000000);
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }
}

/* Enhanced scrollbar styling */
[b-1bmaod47ll]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

[b-1bmaod47ll]::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #f1f5f9, #e2e8f0);
    border-radius: 3px;
}

[b-1bmaod47ll]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #cbd5e1, #94a3b8);
    border-radius: 3px;
    transition: background 0.3s ease;
}

[b-1bmaod47ll]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #94a3b8, #64748b);
}

/* Dropdown scrollbar styling */
.filter-dropdown-menu[b-1bmaod47ll]::-webkit-scrollbar {
    width: 4px;
}

.filter-dropdown-menu[b-1bmaod47ll]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 2px;
}

.filter-dropdown-menu[b-1bmaod47ll]::-webkit-scrollbar-thumb {
    background: var(--lv-background-accent);
    border-radius: 2px;
}

.filter-dropdown-menu[b-1bmaod47ll]::-webkit-scrollbar-thumb:hover {
    background: var(--lv-hover-accent);
}

/* Mobile close button */
.mobile-close-container[b-1bmaod47ll] {
    display: none;
    position: absolute;
    top: calc(var(--lv-spacing-unit) * 2);
    right: calc(var(--lv-spacing-unit) * 2);
    z-index: 1001;
}

.mobile-close-btn[b-1bmaod47ll] {
    color: black;
    border: none;
    padding: 5px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.3s ease;
}

    .mobile-close-btn:hover[b-1bmaod47ll] {
        background: linear-gradient(145deg, #dc2626, #b91c1c);
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    }

@media (max-width: 767px) {
    .mobile-close-container[b-1bmaod47ll] {
        display: block;
    }
}

/* Customer Classification Mobile Overlay - Specific to this page only */
.customer-classification-mobile-overlay[b-1bmaod47ll] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10040; /* Below the sidebar but above everything else */
    display: none; /* Hidden by default */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show overlay only in mobile view when filters are visible */
@media (max-width: 767px) {
    .customer-classification-mobile-overlay[b-1bmaod47ll] {
        display: block;
        opacity: 1;
    }
}

/* Filter dropdown styling improvements */
.filter-dropdown-section[b-1bmaod47ll] {
    padding: 0.5rem;
    border-bottom: 1px solid var(--lv-border-primary);
    margin-bottom: 0.5rem;
    display: flex;
    gap: 0.5rem;
}

.select-all-btn[b-1bmaod47ll], .deselect-all-btn[b-1bmaod47ll] {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--lv-border-primary);
    border-radius: var(--lv-border-radius-small);
    background: var(--lv-background-primary);
    color: var(--lv-text-primary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
}

.select-all-btn:hover[b-1bmaod47ll] {
    background: var(--lv-background-accent);
    color: var(--lv-text-inverted);
}

.deselect-all-btn:hover[b-1bmaod47ll] {
    background: #dc2626;
    color: white;
    border-color: #dc2626;
}

/* Improved error messaging */
.alert-message.error[b-1bmaod47ll] {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    border-radius: var(--lv-border-radius);
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

.alert-message.error h4[b-1bmaod47ll] {
    color: #dc2626;
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.alert-message.error ul[b-1bmaod47ll] {
    margin: 0;
    padding-left: 1.5rem;
}

.alert-message.error li[b-1bmaod47ll] {
    color: #991b1b;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

/* Date range filter styling */
.filter-group h6[b-1bmaod47ll] {
    font-weight: 600;
    color: var(--lv-text-primary);
}

/* Improve dropdown item styling */
.filter-dropdown-item[b-1bmaod47ll] {
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.filter-dropdown-item:hover[b-1bmaod47ll] {
    background: var(--lv-hover-background);
}

.custom-checkbox[b-1bmaod47ll] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--lv-border-primary);
    border-radius: 3px;
    background: var(--lv-background-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.custom-checkbox:checked[b-1bmaod47ll] {
    background: var(--lv-background-accent);
    border-color: var(--lv-background-accent);
}

.checkbox-label[b-1bmaod47ll] {
    font-size: 0.9rem;
    color: var(--lv-text-primary);
    cursor: pointer;
    user-select: none;
}

/* Table improvements for better data display */
.lv-table td[b-1bmaod47ll] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    text-align: center;
    font-size: 11px;
}

.lv-table .data-total[b-1bmaod47ll] {
    font-weight: 600;
    background: rgba(0, 0, 0, 0.03);
}

/* Positive/negative indicators */
.positive[b-1bmaod47ll] {
    color: #059669;
    font-weight: 600;
}

.negative[b-1bmaod47ll] {
    color: #dc2626;
    font-weight: 600;
}

/* Mobile responsive improvements */
@media (max-width: 768px) {
    .filter-dropdown-section[b-1bmaod47ll] {
        flex-direction: column;
    }
    
    .select-all-btn[b-1bmaod47ll], .deselect-all-btn[b-1bmaod47ll] {
        font-size: 0.8rem;
        padding: 0.375rem;
    }
    
    .alert-message.error[b-1bmaod47ll] {
        padding: 0.75rem;
    }
    
    .alert-message.error h4[b-1bmaod47ll] {
        font-size: 0.9rem;
    }
    
    .alert-message.error li[b-1bmaod47ll] {
        font-size: 0.8rem;
    }
}

.placeholder-text[b-1bmaod47ll],
.placeholder-btn[b-1bmaod47ll],
.placeholder-filter[b-1bmaod47ll],
.placeholder-header[b-1bmaod47ll],
.placeholder-cell[b-1bmaod47ll] {
    animation: pulse-b-1bmaod47ll 1.5s ease-in-out infinite;
}

@keyframes pulse-b-1bmaod47ll {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.loading-more-indicator[b-1bmaod47ll] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    margin-bottom: 1rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    color: var(--lv-text-secondary);
    font-size: var(--lv-font-size-small);
}

    .loading-more-indicator .spinner[b-1bmaod47ll] {
        width: 16px;
        height: 16px;
        border: 2px solid var(--lv-border-primary);
        border-top: 2px solid var(--lv-background-accent);
        border-radius: 50%;
        animation: spin-b-1bmaod47ll 1s linear infinite;
        margin-right: 0.5rem;
    }

@keyframes spin-b-1bmaod47ll {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Compact Table Styles for Product Catalog */
.compact-table[b-1bmaod47ll] {
    font-size: 12px;
    line-height: 1.3;
}

.compact-table th[b-1bmaod47ll],
.compact-table td[b-1bmaod47ll] {
    padding: 6px 8px;
    font-size: 12px;
}

.compact-table th[b-1bmaod47ll] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f8f9fa;
    border-bottom: 2px solid #e5e7eb;
}

.compact-table tbody tr[b-1bmaod47ll] {
    border-bottom: 1px solid #f3f4f6;
}

.compact-table tbody tr:hover[b-1bmaod47ll] {
    background-color: #f9fafb;
}

.compact-table .data-total[b-1bmaod47ll] {
    font-weight: 600;
    color: #1f2937;
}

/* Products view specific styling for full height */
.products-view[b-1bmaod47ll] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.products-view .brand-share-section[b-1bmaod47ll] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Make the table wrapper take full height for the products view */
.products-view .table-wrapper[b-1bmaod47ll] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

/* Ensure pagination stays at bottom */
.products-view .pagination-container[b-1bmaod47ll] {
    flex-shrink: 0;
    margin-top: 1rem;
    padding: 0.5rem 0;
}

.products-view .brand-share-section h3[b-1bmaod47ll] {
    font-size: 18px;
    margin-bottom: 12px;
    color: #374151;
}

/* Responsive adjustments for compact table */
@media (max-width: 768px) {
    .compact-table[b-1bmaod47ll] {
        font-size: 11px;
    }
    
    .compact-table th[b-1bmaod47ll],
    .compact-table td[b-1bmaod47ll] {
        padding: 4px 6px;
        font-size: 11px;
    }
    
    .compact-table th[b-1bmaod47ll] {
        font-size: 10px;
    }
    
    .products-view .table-wrapper[b-1bmaod47ll] {
        flex: 1;
        min-height: 0;
    }
}

.export-btn[b-1bmaod47ll] {
    background: linear-gradient(145deg, #ffffff, #f3f4f6);
    color: var(--lv-text-secondary);
    border: 2px solid var(--lv-border-primary);
    padding: calc(var(--lv-spacing-unit) * 0.8) calc(var(--lv-spacing-unit) * 1.5);
    border-radius: var(--lv-border-radius);
    cursor: pointer;
    font-size: var(--lv-font-size-small);
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
    margin-bottom: 1em;
}

.export-btn[b-1bmaod47ll]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
    transition: left 0.5s ease;
}

.export-btn:hover[b-1bmaod47ll]::before {
    left: 100%;
}

.export-btn:hover[b-1bmaod47ll] {
    background: linear-gradient(145deg, #f9fafb, #f1f5f9);
    border-color: var(--lv-background-accent);
    color: var(--lv-background-accent);
    transform: translateY(-1px);
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.export-btn-container[b-1bmaod47ll] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 1em;
}

.export-btn[b-1bmaod47ll] {
    width: auto;
    min-width: 0;
    margin: 0.5rem;
}

.customer-details-header[b-1bmaod47ll] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1em;
}

/* Remove .export-btn-container if not needed */
.export-btn-container[b-1bmaod47ll] { display: none; }

/* Brands Modal Styles */
.brands-modal-overlay[b-1bmaod47ll] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--lv-spacing-unit) * 2);
}

.brands-modal[b-1bmaod47ll] {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border: 1px solid var(--lv-border-primary);
    border-radius: var(--lv-border-radius);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 10px 20px rgba(0, 0, 0, 0.2);
    max-width: 800px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn-b-1bmaod47ll 0.3s ease-out;
}

@keyframes modalSlideIn-b-1bmaod47ll {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.brands-modal-header[b-1bmaod47ll] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(var(--lv-spacing-unit) * 3);
    background: linear-gradient(135deg, #f9fafb, #ffffff);
    border-bottom: 1px solid var(--lv-border-primary);
    flex-shrink: 0;
}

.brands-modal-header h3[b-1bmaod47ll] {
    margin: 0;
    font-size: var(--lv-font-size-large);
    font-weight: 700;
    color: var(--lv-text-primary);
    letter-spacing: -0.01em;
}

.brands-modal-close[b-1bmaod47ll] {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--lv-text-secondary);
    cursor: pointer;
    padding: calc(var(--lv-spacing-unit) * 0.5);
    border-radius: var(--lv-border-radius-small);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.brands-modal-close:hover[b-1bmaod47ll] {
    background: var(--lv-hover-background);
    color: var(--lv-text-primary);
    transform: scale(1.1);
}

.brands-modal-content[b-1bmaod47ll] {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Stack search under buttons; keep buttons on one row */
.brands-modal-controls[b-1bmaod47ll] {
    display: flex;
    flex-direction: column;
    gap: var(--lv-spacing-unit);
    margin-block-start: calc(var(--lv-spacing-unit) * 1.5); /* top */
    margin-inline: calc(var(--lv-spacing-unit) * 2); /* left & right */
}

.brands-btn-row[b-1bmaod47ll] {
    display: flex;
    gap: var(--lv-spacing-unit);
}

    /* Keep your “equal width” buttons */
    .brands-btn-row .select-all-btn[b-1bmaod47ll],
    .brands-btn-row .deselect-all-btn[b-1bmaod47ll] {
        flex: 1 1 0;
    }

/* Search takes full width below */
.brands-search[b-1bmaod47ll] {
    display: flex;
    gap: 8px;
    align-items: stretch;
    width: 100%;
    margin-top: 0; /* override any earlier margin */
}

.brands-search-input[b-1bmaod47ll] {
    flex: 1 1 auto;
    width: 100%;
}

.brands-search-clear[b-1bmaod47ll] {
    width: 36px; /* optional: small square clear button */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}


.brands-modal-grid[b-1bmaod47ll] {
    flex-grow: 1;
    overflow-y: auto;
    padding: calc(var(--lv-spacing-unit) * 2);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: calc(var(--lv-spacing-unit) * 1.5);
    max-height: 60vh;
}

.brands-modal-item[b-1bmaod47ll] {
    display: flex;
    align-items: center;
    gap: calc(var(--lv-spacing-unit) * 1.5);
    padding: calc(var(--lv-spacing-unit) * 1.5);
    background: linear-gradient(145deg, #ffffff, #f9fafb);
    border: 1px solid var(--lv-border-secondary);
    border-radius: var(--lv-border-radius-small);
    transition: all 0.2s ease;
    cursor: pointer;
}

.brands-modal-item:hover[b-1bmaod47ll] {
    background: linear-gradient(145deg, #f9fafb, #f3f4f6);
    border-color: var(--lv-background-accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.brands-modal-item .custom-checkbox[b-1bmaod47ll] {
    flex-shrink: 0;
}

.brands-modal-item .checkbox-label[b-1bmaod47ll] {
    font-size: var(--lv-font-size-base);
    font-weight: 500;
    color: var(--lv-text-primary);
    cursor: pointer;
    user-select: none;
    flex-grow: 1;
}

.brands-modal-btn[b-1bmaod47ll] {
    background: linear-gradient(145deg, var(--lv-background-accent), var(--lv-hover-accent));
    color: var(--lv-text-inverted);
    border: none;
    padding: calc(var(--lv-spacing-unit) * 1) calc(var(--lv-spacing-unit) * 2);
    border-radius: var(--lv-border-radius-small);
    font-size: var(--lv-font-size-small);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.brands-modal-btn:hover[b-1bmaod47ll] {
    background: linear-gradient(145deg, var(--lv-hover-accent), #4c51bf);
    transform: translateY(-1px);
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Mobile responsive for brands modal */
@media (max-width: 768px) {
    .brands-modal-overlay[b-1bmaod47ll] {
        z-index: 25000 !important; /* Ensure it's above the filter menu in mobile */
    }
    
    .brands-modal[b-1bmaod47ll] {
        max-width: 95vw;
        max-height: 90vh;
        padding-top:4rem;
    }
    
    .brands-modal-grid[b-1bmaod47ll] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: calc(var(--lv-spacing-unit));
        padding: calc(var(--lv-spacing-unit));
    }
    
    .brands-modal-item[b-1bmaod47ll] {
        padding: calc(var(--lv-spacing-unit));
    }
    
    .brands-modal-item .checkbox-label[b-1bmaod47ll] {
        font-size: var(--lv-font-size-small);
    }
    
    .brands-modal-controls[b-1bmaod47ll] {
        flex-direction: column;
        gap: calc(var(--lv-spacing-unit) * 0.5);
    }
    
    .brands-modal-controls .select-all-btn[b-1bmaod47ll],
    .brands-modal-controls .deselect-all-btn[b-1bmaod47ll] {
        font-size: var(--lv-font-size-small);
        padding: calc(var(--lv-spacing-unit) * 0.6) calc(var(--lv-spacing-unit) * 1);
    }
}

/* Brands Modal Footer Styles */
.brands-modal-footer[b-1bmaod47ll] {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--lv-spacing-unit) * 1.5);
    padding: calc(var(--lv-spacing-unit) * 2);
    border-top: 1px solid var(--lv-border-primary);
    background: var(--lv-background-primary);
    border-radius: 0 0 var(--lv-border-radius) var(--lv-border-radius);
}

.brands-modal-cancel-btn[b-1bmaod47ll],
.brands-modal-apply-btn[b-1bmaod47ll] {
    padding: calc(var(--lv-spacing-unit) * 1) calc(var(--lv-spacing-unit) * 2);
    font-size: var(--lv-font-size-base);
    font-weight: 600;
    border-radius: var(--lv-border-radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.brands-modal-cancel-btn[b-1bmaod47ll] {
    background: var(--lv-background-primary);
    color: var(--lv-text-primary);
    border-color: var(--lv-border-primary);
}

.brands-modal-cancel-btn:hover[b-1bmaod47ll] {
    background: var(--lv-hover-primary);
    border-color: var(--lv-hover-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.brands-modal-apply-btn[b-1bmaod47ll] {
    background: linear-gradient(145deg, var(--lv-background-accent), var(--lv-hover-accent));
    color: var(--lv-text-inverted);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.brands-modal-apply-btn:hover[b-1bmaod47ll] {
    background: linear-gradient(145deg, var(--lv-hover-accent), #4c51bf);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

/* Brands Modal Warning Styles */
.brands-modal-warning[b-1bmaod47ll] {
    display: flex;
    align-items: center;
    gap: calc(var(--lv-spacing-unit));
    padding: calc(var(--lv-spacing-unit) * 1.5);
    margin: calc(var(--lv-spacing-unit)) calc(var(--lv-spacing-unit) * 2);
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #f59e0b;
    border-radius: var(--lv-border-radius);
    color: #92400e;
    font-size: var(--lv-font-size-small);
    font-weight: 600;
    animation: warningPulse-b-1bmaod47ll 0.3s ease-out;
}

.warning-icon[b-1bmaod47ll] {
    font-size: 16px;
    flex-shrink: 0;
}

.warning-text[b-1bmaod47ll] {
    flex-grow: 1;
}

@keyframes warningPulse-b-1bmaod47ll {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile responsive for brands modal footer */
@media (max-width: 768px) {
    .brands-modal-footer[b-1bmaod47ll] {
        gap: calc(var(--lv-spacing-unit));
        padding: calc(var(--lv-spacing-unit) * 1.5);
    }
    
    .brands-modal-cancel-btn[b-1bmaod47ll],
    .brands-modal-apply-btn[b-1bmaod47ll] {
        width: 100%;
        padding: calc(var(--lv-spacing-unit) * 1.2);
        font-size: var(--lv-font-size-small);
    }
    
    .brands-modal-warning[b-1bmaod47ll] {
        margin: calc(var(--lv-spacing-unit) * 0.5) calc(var(--lv-spacing-unit));
        padding: calc(var(--lv-spacing-unit));
        font-size: var(--lv-font-size-small);
    }
}

.net-pos[b-1bmaod47ll] {
    color: #059669 !important;
}
/* green */
.net-neg[b-1bmaod47ll] {
    color: #dc2626 !important;
}
/* red  */
.net-zero[b-1bmaod47ll] {
    color: inherit;
}

/* add + only for positives */
.net-pos .cell-val[b-1bmaod47ll]::before {
    content: "+";
    margin-right: 1px;
}



/* red */

/* Base Styles */
body[b-1bmaod47ll] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    margin: 0;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* Headers & Titles */
.dashboard-header[b-1bmaod47ll] {
    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[b-1bmaod47ll]::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[b-1bmaod47ll]::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-b-1bmaod47ll 4s ease-in-out infinite alternate;
    }

.dashboard-title[b-1bmaod47ll] {
    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[b-1bmaod47ll] {
    color: #60a5fa;
    filter: drop-shadow(0 2px 8px rgba(96, 165, 250, 0.4));
    animation: iconGlow-b-1bmaod47ll 3s ease-in-out infinite alternate;
    width: 25px;
    height: 25px;
}

.dashboard-subtitle[b-1bmaod47ll] {
    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[b-1bmaod47ll],
.table-header h3[b-1bmaod47ll] {
    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;
}

/* Filters Section */
.filters-section[b-1bmaod47ll] {
    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[b-1bmaod47ll] {
    display: flex;
    gap: 20px;
    align-items: end;
    flex-wrap: wrap;
}

.filter-group[b-1bmaod47ll] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-right: 16px;
}

    .filter-group label[b-1bmaod47ll] {
        font-weight: 700;
        color: #374151;
        font-size: 0.9rem;
        letter-spacing: -0.01em;
    }

/* Custom Select & Dropdown */
.custom-select[b-1bmaod47ll] {
    position: relative;
    min-width: 120px;
    max-width: 200px;
    user-select: none;
    width: auto;
    z-index: 100;
}

.select-trigger[b-1bmaod47ll] {
    position: relative;
    padding: 12px 40px 12px 16px;
    background: white;
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: black;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    text-align: left;
    min-width: 200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filter-group:has([for="goalFilter"]) .custom-select[b-1bmaod47ll],
.filter-group:has([for="journeyFilter"]) .custom-select[b-1bmaod47ll] {
    min-width: 250px;
    max-width: 500px;
    width: fit-content;
}

.filter-group:has([for="goalFilter"]) .select-trigger[b-1bmaod47ll],
.filter-group:has([for="journeyFilter"]) .select-trigger[b-1bmaod47ll] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 250px; /* Base for these specific triggers */
    padding-right: 45px;
}

.filter-group:has([for="journeyFilter"]) .select-trigger[b-1bmaod47ll] {
    min-width: 200px; /* Override for journey filter */
}

.select-trigger:hover[b-1bmaod47ll] {
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.select-trigger:focus[b-1bmaod47ll],
.custom-select:focus-within .select-trigger[b-1bmaod47ll] {
    outline: none;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.custom-select:has(.select-options) .select-trigger[b-1bmaod47ll] {
    border-color: rgba(255, 255, 255, 0.5);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.select-arrow[b-1bmaod47ll] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #000000;
    transition: transform 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
}

    .select-arrow.rotated[b-1bmaod47ll] {
        transform: rotate(180deg);
        color: rgb(59 52 52 / 80%);
    }

.select-options[b-1bmaod47ll] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: all 0.2s ease;
    animation: dropdownSlide-b-1bmaod47ll 0.2s ease-out;
}

.select-option[b-1bmaod47ll] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f3f4f6;
    position: relative;
    overflow: hidden;
}

    .select-option[b-1bmaod47ll]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent);
        transition: left 0.3s ease;
    }

    .select-option:hover[b-1bmaod47ll]::before {
        left: 100%;
    }

    .select-option:last-child[b-1bmaod47ll] {
        border-bottom: none;
        border-radius: 0 0 8px 8px;
    }

    .select-option:hover[b-1bmaod47ll] {
        background: linear-gradient(145deg, #f8fafc, #f1f5f9);
        color: #000000;
        box-shadow: inset 2px 0 0 rgba(0, 0, 0, 0.3);
    }

    .select-option.selected[b-1bmaod47ll] {
        background: linear-gradient(145deg, #000000, #333333);
        color: #ffffff;
        font-weight: 600;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 2px 0 0 rgba(255, 255, 255, 0.3);
    }

        .select-option.selected:hover[b-1bmaod47ll] {
            background: linear-gradient(145deg, #000000, #333333);
            color: #ffffff;
            font-weight: 600;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 2px 0 0 rgba(255, 255, 255, 0.3);
        }

    .select-option .flag-icon[b-1bmaod47ll],
    .market-flag .flag-icon[b-1bmaod47ll] {
        width: 20px; /* Adjusted for consistency */
        height: 15px; /* Adjusted for consistency */
        border-radius: 2px;
        object-fit: cover;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        transition: transform 0.2s ease;
    }

    .select-option:hover .flag-icon[b-1bmaod47ll] {
        transform: scale(1.05);
    }

/* Buttons - Primary & Secondary */
.refresh-btn[b-1bmaod47ll],
.retry-btn[b-1bmaod47ll] {
    padding: 12px 24px;
    background: linear-gradient(145deg, #000000, #333333);
    color: white;
    border: 2px solid transparent;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .refresh-btn[b-1bmaod47ll]::before,
    .retry-btn[b-1bmaod47ll]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s ease;
    }

    .refresh-btn:hover[b-1bmaod47ll]::before,
    .retry-btn:hover[b-1bmaod47ll]::before {
        left: 100%;
    }

    .refresh-btn:hover:not(:disabled)[b-1bmaod47ll],
    .retry-btn:hover[b-1bmaod47ll] {
        background: linear-gradient(145deg, #333333, #4c51bf);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

.chart-btn[b-1bmaod47ll] {
    padding: 10px 16px;
    background: linear-gradient(145deg, #ffffff, #f3f4f6);
    color: #6b7280;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
}

    .chart-btn[b-1bmaod47ll]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
        transition: left 0.5s ease;
    }

    .chart-btn:hover[b-1bmaod47ll]::before {
        left: 100%;
    }

    .chart-btn:hover[b-1bmaod47ll] {
        background: linear-gradient(145deg, #f9fafb, #f1f5f9);
        border-color: #000000;
        color: #000000;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .chart-btn.active[b-1bmaod47ll] {
        background: linear-gradient(145deg, #000000, #333333);
        color: #ffffff;
        border-color: #000000;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

        .chart-btn.active:hover[b-1bmaod47ll] {
            background: linear-gradient(145deg, #333333, #4c51bf);
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }

.percentage-btn[b-1bmaod47ll] {
    background: linear-gradient(145deg, #f8fafc, #e2e8f0);
    border: 2px solid #6d69cc;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 8px;
    color: #6d69cc;
    font-weight: 800;
    font-size: inherit;
    font-family: inherit;
    transition: all 0.3s ease;
    text-decoration: none;
    padding: 2px 6px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(109, 105, 204, 0.2);
}

    .percentage-btn[b-1bmaod47ll]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(109, 105, 204, 0.1), transparent);
        transition: left 0.5s ease;
    }

    .percentage-btn:hover[b-1bmaod47ll]::before {
        left: 100%;
    }

    .percentage-btn:hover[b-1bmaod47ll] {
        background: linear-gradient(145deg, #6d69cc, #5854a6);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(109, 105, 204, 0.4);
        border-color: #5854a6;
    }

    .percentage-btn:active[b-1bmaod47ll] {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(109, 105, 204, 0.3);
    }

    .percentage-btn:focus[b-1bmaod47ll] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(109, 105, 204, 0.3);
    }

/* Chart Filter Dropdown */
.chart-filter-dropdown[b-1bmaod47ll] {
    margin-left: auto;
}

.chart-filter-options[b-1bmaod47ll] {
    max-height: 300px;
    overflow-y: auto;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
}

.filter-checkbox-option[b-1bmaod47ll] {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    user-select: none;
}

    .filter-checkbox-option:hover[b-1bmaod47ll] {
        background-color: #f3f4f6;
    }

    .filter-checkbox-option input[type="checkbox"][b-1bmaod47ll] {
        margin-right: 8px;
        width: 16px;
        height: 16px;
        accent-color: #000000;
        cursor: pointer;
    }

.checkbox-label[b-1bmaod47ll] {
    font-size: 13px;
    color: #374151;
    line-height: 1.4;
    word-break: break-word;
    flex: 1;
}

.all-journeys-option[b-1bmaod47ll] {
    font-weight: 600;
    background: linear-gradient(145deg, #000000, #333333);
    color: #ffffff;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 4px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    user-select: none;
}

    .all-journeys-option:hover[b-1bmaod47ll] {
        background: linear-gradient(145deg, #333333, #000000);
    }

    .all-journeys-option .checkbox-label[b-1bmaod47ll] {
        color: #ffffff;
        font-weight: 600;
    }

    .all-journeys-option input[type="checkbox"][b-1bmaod47ll] {
        accent-color: #ffffff;
    }

/* Progress Bar */
.progress-container[b-1bmaod47ll] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.progress-bar[b-1bmaod47ll] {
    flex: 1;
    height: 10px; /* Default height */
    background: #e5e7eb;
    border-radius: 4px; /* Default radius */
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.8);
    min-width: 60px;
    position: relative;
}

.progress-fill[b-1bmaod47ll] {
    height: 100%;
    background: linear-gradient(90deg, #f6b43b, #d87c1d);
    border-radius: 3px;
    transition: none;
    position: relative;
}

    .progress-fill[b-1bmaod47ll]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        right: 0;
        bottom: 0;
        width: 100%;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 100%);
        animation: progressWave-b-1bmaod47ll 2s ease-in-out infinite;
    }

.customer-row:hover .progress-fill[b-1bmaod47ll]::before {
    animation-duration: 1.5s;
}

.progress-fill.complete[b-1bmaod47ll] {
    background: linear-gradient(90deg, #10b981, #059669); /* Specific for complete */
}

    .progress-fill.complete[b-1bmaod47ll]::before {
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 100%);
    }

.progress-text[b-1bmaod47ll] {
    font-size: 11px; /* Specific for journey stages modal */
    font-weight: 600;
    color: #374151;
    min-width: 32px; /* Specific for journey stages modal */
    text-align: right;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.customer-row:hover .progress-text[b-1bmaod47ll] {
    color: #000000;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}


/* Status Dots & Indicators */
.status-dot[b-1bmaod47ll] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}

    .status-dot.all[b-1bmaod47ll] {
        background: linear-gradient(135deg, #6b7280, #9ca3af);
        border: 1px solid rgba(107, 114, 128, 0.3);
    }

    .status-dot.active[b-1bmaod47ll] {
        background: linear-gradient(135deg, #10b981, #34d399);
        border: 1px solid rgba(16, 185, 129, 0.3);
        box-shadow: 0 0 6px rgba(16, 185, 129, 0.3);
    }

    .status-dot.inactive[b-1bmaod47ll] {
        background: linear-gradient(135deg, #ef4444, #f87171);
        border: 1px solid rgba(239, 68, 68, 0.3);
        box-shadow: 0 0 6px rgba(239, 68, 68, 0.3);
    }

.status-indicator[b-1bmaod47ll] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
}

    .status-indicator .status-dot[b-1bmaod47ll] {
        width: 6px;
        height: 6px;
    }

/* Scrollbar Styling */
.select-options[b-1bmaod47ll]::-webkit-scrollbar,
.customer-table-wrapper[b-1bmaod47ll]::-webkit-scrollbar,
.stages-table-wrapper[b-1bmaod47ll]::-webkit-scrollbar { /* Applied to all scrollable areas */
    width: 6px;
}

.select-options[b-1bmaod47ll]::-webkit-scrollbar-track,
.customer-table-wrapper[b-1bmaod47ll]::-webkit-scrollbar-track,
.stages-table-wrapper[b-1bmaod47ll]::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #f1f5f9, #e2e8f0);
    border-radius: 3px;
}

.select-options[b-1bmaod47ll]::-webkit-scrollbar-thumb,
.customer-table-wrapper[b-1bmaod47ll]::-webkit-scrollbar-thumb,
.stages-table-wrapper[b-1bmaod47ll]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #cbd5e1, #94a3b8);
    border-radius: 3px;
    transition: background 0.3s ease;
}

    .select-options[b-1bmaod47ll]::-webkit-scrollbar-thumb:hover,
    .customer-table-wrapper[b-1bmaod47ll]::-webkit-scrollbar-thumb:hover,
    .stages-table-wrapper[b-1bmaod47ll]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #94a3b8, #64748b);
    }

/* Focus Trap */
.custom-select:focus-within[b-1bmaod47ll] {
    z-index: 1001;
}

/* Removed old select styling */
.filter-select[b-1bmaod47ll] {
    display: none;
}

/* Spinners */
.spinner[b-1bmaod47ll] {
    width: 18px;
    height: 18px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spinEnhanced-b-1bmaod47ll 1s linear infinite;
}

.loading-spinner[b-1bmaod47ll] {
    width: 50px; /* Default for loading containers */
    height: 50px; /* Default for loading containers */
    border: 4px solid #e5e7eb;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spinEnhanced-b-1bmaod47ll 1s linear infinite;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
}

/* Loading & Error States */
.loading-container[b-1bmaod47ll],
.error-container[b-1bmaod47ll],
.modal-loading[b-1bmaod47ll],
.stages-loading[b-1bmaod47ll],
.no-customers[b-1bmaod47ll],
.no-stages[b-1bmaod47ll] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.error-icon[b-1bmaod47ll] {
    color: #ef4444;
    margin-bottom: 20px;
}

.error-container h3[b-1bmaod47ll],
.no-stages h3[b-1bmaod47ll] {
    color: #374151;
    margin-bottom: 10px; /* Adjusted for consistency */
}

.error-container p[b-1bmaod47ll],
.no-stages p[b-1bmaod47ll] {
    color: #6b7280;
    margin-bottom: 20px; /* Adjusted for consistency */
    max-width: 400px; /* Added for consistency with no-stages */
}

/* KPI Section */
.kpi-section[b-1bmaod47ll] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.kpi-card[b-1bmaod47ll] {
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .kpi-card:hover[b-1bmaod47ll] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

.kpi-icon[b-1bmaod47ll] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

    .kpi-icon.contacts[b-1bmaod47ll] {
        background: linear-gradient(135deg, #667eea, #764ba2);
    }

    .kpi-icon.revenue[b-1bmaod47ll] {
        background: linear-gradient(135deg, #f093fb, #f5576c);
    }

    .kpi-icon.rpc[b-1bmaod47ll] {
        background: linear-gradient(135deg, #4facfe, #00f2fe);
    }

.kpi-content h3[b-1bmaod47ll] {
    margin: 0 0 8px 0;
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    line-height: 1.2;
}

.kpi-value[b-1bmaod47ll] {
    margin: 0 0 4px 0;
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
}

.kpi-label[b-1bmaod47ll] {
    font-size: 0.85rem;
    color: #6b7280;
}

.kpi-dual-values[b-1bmaod47ll] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kpi-primary-value[b-1bmaod47ll] {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.kpi-secondary-value[b-1bmaod47ll] {
    opacity: 0.8;
}

.kpi-value-secondary[b-1bmaod47ll] {
    margin: 0 0 4px 0;
    font-size: 2rem;
    font-weight: 600;
    color: #000000;
}

.kpi-label-secondary[b-1bmaod47ll] {
    font-size: 0.85rem;
    color: #6b7280;
    white-space: nowrap;
}

.submetric-rate[b-1bmaod47ll] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .submetric-rate[b-1bmaod47ll]::before {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: currentColor;
    }

.kpi-card .submetric-rate[data-rate="high"][b-1bmaod47ll] {
    color: #10b981;
}

.kpi-card .submetric-rate[data-rate="medium"][b-1bmaod47ll] {
    color: #f59e0b;
}

.kpi-card .submetric-rate[data-rate="low"][b-1bmaod47ll] {
    color: #ef4444;
}

/* KPI Equal Values Layout */
.kpi-equal-values[b-1bmaod47ll] {
    display: flex;
    gap: 20px;
    width: 100%;
    justify-content: space-between;
}

.kpi-equal-value[b-1bmaod47ll] {
    flex: 1;
    text-align: center;
}

.kpi-value-equal[b-1bmaod47ll] {
    margin: 0 0 4px 0;
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
}

.kpi-label-equal[b-1bmaod47ll] {
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.2;
}

.kpi-value-equal.percentage[b-1bmaod47ll] {
    color: #4c51bf;
    font-weight: 700;
}

/* KPI Secondary Metric Layout */
.kpi-secondary-metric[b-1bmaod47ll] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* KPI Side-by-Side Layout */
.kpi-side-by-side[b-1bmaod47ll] {
    display: flex;
    gap: 20px;
    width: 100%;
    justify-content: space-between;
}

.kpi-side-metric[b-1bmaod47ll] {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.kpi-value-large[b-1bmaod47ll] {
    margin: 0 0 10px 0;
    font-size: 2rem;
    font-weight: 700;
    margin-top: 26px;
    color: #111827;
}

.kpi-label-large[b-1bmaod47ll] {
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.2;
    margin-bottom: 6px;
}

/* Charts Section */
.charts-section[b-1bmaod47ll] {
    margin-bottom: 30px;
}

.chart-container[b-1bmaod47ll] {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    position: relative;
}

    .chart-container[b-1bmaod47ll]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.3), transparent);
    }

    .chart-container:hover[b-1bmaod47ll] {
        transform: translateY(-2px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

.chart-header[b-1bmaod47ll] {
    padding: 24px 28px;
    border-bottom: 1px solid rgba(229, 231, 235, 0.6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    background: linear-gradient(135deg, #f9fafb, #ffffff);
    position: relative;
}

    .chart-header[b-1bmaod47ll]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.2), transparent);
    }

.chart-controls[b-1bmaod47ll] {
    display: flex;
    gap: 10px; /* Default gap */
    flex-wrap: wrap;
}

/* Chart header controls layout */
.chart-header-controls[b-1bmaod47ll] {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* View toggle buttons */
.view-toggle-buttons[b-1bmaod47ll] {
    display: flex;
    border-radius: 8px;
    padding: 4px;
    gap: 2px;
    border: 1px solid rgba(229, 231, 235, 0.6);
}

.view-toggle-btn[b-1bmaod47ll] {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    min-height: 36px;
    min-width: 36px;
}

    .view-toggle-btn:hover[b-1bmaod47ll] {
        background: linear-gradient(135deg, #57cff8, #0066ff);
        color: #374151;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .view-toggle-btn.active[b-1bmaod47ll] {
        background: linear-gradient(135deg, #57cff8, #0066ff);
        color: white;
        box-shadow: 0 2px 8px rgba(0, 82, 255, 0.3);
    }

        .view-toggle-btn.active:hover[b-1bmaod47ll] {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 82, 255, 0.4);
        }

    .view-toggle-btn svg[b-1bmaod47ll] {
        width: 16px;
        height: 16px;
    }

.chart-wrapper[b-1bmaod47ll] {
    padding: 24px;
    height: 400px;
    position: relative;
    background: linear-gradient(135deg, #ffffff, #fafbfc);
}

    .chart-wrapper canvas[b-1bmaod47ll] {
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
    }

    .chart-wrapper .chartjs-legend ul li.hidden span[b-1bmaod47ll] {
        text-decoration: line-through !important;
        color: #9ca3af !important;
        opacity: 0.6;
    }

.comparison-charts[b-1bmaod47ll] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.half-width .chart-wrapper[b-1bmaod47ll] {
    height: 350px;
}

/* Comparison table wrapper */
.comparison-table-wrapper[b-1bmaod47ll] {
    padding: 24px;
    height: 350px;
    overflow-y: auto;
    background: linear-gradient(135deg, #ffffff, #fafbfc);
}

/* Comparison table */
.comparison-table[b-1bmaod47ll] {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(229, 231, 235, 0.6);
}

    .comparison-table th[b-1bmaod47ll] {
        background: linear-gradient(135deg, #f9fafb, #ffffff);
        color: #374151;
        font-weight: 600;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 16px 20px;
        text-align: center;
        border-bottom: 2px solid rgba(229, 231, 235, 0.8);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .comparison-table td[b-1bmaod47ll] {
        padding: 14px 20px;
        border-bottom: 1px solid rgba(229, 231, 235, 0.4);
        font-size: 0.75rem;
        color: #374151;
        vertical-align: middle;
    }

    .comparison-table tbody tr[b-1bmaod47ll] {
        transition: all 0.2s ease;
    }

        .comparison-table tbody tr:hover[b-1bmaod47ll] {
            background: linear-gradient(135deg, rgba(0, 82, 255, 0.03), rgba(59, 130, 246, 0.02));
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        }

        .comparison-table tbody tr:last-child td[b-1bmaod47ll] {
            border-bottom: none;
        }

/* Table cell specific styling */
.journey-name-cell[b-1bmaod47ll] {
    font-weight: 600;
    color: #1f2937;
    max-width: 200px;
    text-align: center;
    word-wrap: break-word;
    font-size: 0.8rem;
}

.revenue-cell[b-1bmaod47ll] {
    font-weight: 600;
    color: #059669;
    text-align: center;
    font-size: 0.8rem;
}

.percentage-cell[b-1bmaod47ll] {
    font-weight: 600;
    color: #0052ff;
    text-align: center;
    font-size: 0.8rem;
}

.contacts-cell[b-1bmaod47ll] {
    font-weight: 600;
    color: #6b7280;
    text-align: center;
    font-size: 0.8rem;
}

/* No data message */
.no-data-message[b-1bmaod47ll] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    text-align: center;
}

    .no-data-message p[b-1bmaod47ll] {
        color: #6b7280;
        font-size: 0.8rem;
        font-weight: 500;
        margin: 0;
    }

/* Table Section */
.table-section[b-1bmaod47ll] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.table-header[b-1bmaod47ll] {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.table-controls[b-1bmaod47ll] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.search-input[b-1bmaod47ll] {
    padding: 10px 14px;
    border: none; /* Base for search input */
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    background: linear-gradient(145deg, #ffffff, #f9fafb);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
    min-width: 220px;
}

    .search-input[b-1bmaod47ll]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
        transition: left 0.5s ease;
    }

    .search-input:hover[b-1bmaod47ll]::before {
        left: 100%;
    }

    .search-input:focus[b-1bmaod47ll] {
        outline: none;
        border-color: #000000;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 3px rgba(0, 0, 0, 0.15);
        transform: translateY(-1px);
    }

    .search-input:hover[b-1bmaod47ll] {
        border-color: #333333;
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

.table-wrapper[b-1bmaod47ll] {
    overflow-x: auto;
}

.performance-table[b-1bmaod47ll] {
    width: 100%;
    border-collapse: collapse;
}

    .performance-table th[b-1bmaod47ll],
    .customer-table th[b-1bmaod47ll],
    .stages-table th[b-1bmaod47ll] { /* Combined table headers */
        background: #f9fafb;
        padding: 12px 10px;
        text-align: left;
        font-size: 13px; /* Default for performance table */
        font-weight: 600;
        color: #374151; /* Default for performance table */
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }



.performance-table td[b-1bmaod47ll],
.customer-table td[b-1bmaod47ll],
.stages-table td[b-1bmaod47ll] { /* Combined table data cells */
    padding: 12px 13px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 11px; /* Default for performance table */
    color: #374151;
    text-align: left; /* <-- ADD THIS: Explicitly set text alignment */
    transition: background-color 0.2s ease;
    vertical-align: middle; /* stages table specific */
    word-wrap: break-word; /* stages table specific */
}

.stages-table[b-1bmaod47ll] {
    font-size: 0.8rem;
}

    .stages-table td[b-1bmaod47ll] {
        padding: 10px 12px; /* stages table specific */
    }

.performance-table tbody tr:hover[b-1bmaod47ll],
.customer-row:hover[b-1bmaod47ll] { /* Combined table row hover */
    background: #f9fafb;
}

.stage-row:hover[b-1bmaod47ll] { /* Stages specific hover for linear gradient */
    transform: none; /* Ensure no extra transform from general hover */
}

.table-footer[b-1bmaod47ll],
.modal-footer[b-1bmaod47ll] { /* Combined footers */
    padding: 20px 24px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.pagination-info p[b-1bmaod47ll] {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 0;
}

.pagination-controls[b-1bmaod47ll] {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    will-change: transform;
}

.pagination-btn[b-1bmaod47ll] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 2px solid #e5e7eb;
    background: #ffffff;
    color: #6b7280;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    will-change: transform, background-color;
}

    .pagination-btn:hover:not(.disabled)[b-1bmaod47ll] {
        background: linear-gradient(145deg, #333333, #555555);
        color: #ffffff;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

    .pagination-btn.active[b-1bmaod47ll] {
        background: linear-gradient(145deg, #4b5563, #6b7280);
        color: #ffffff;
        border-color: transparent;
        box-shadow: 0 4px 12px rgba(75, 85, 99, 0.4);
        border: 2px solid rgba(255, 255, 255, 0.2);
    }

        .pagination-btn.active:hover[b-1bmaod47ll] {
            background: linear-gradient(145deg, #6b7280, #9ca3af);
            color: #ffffff;
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(75, 85, 99, 0.5);
            border-color: rgba(255, 255, 255, 0.3);
        }

    .pagination-btn.disabled[b-1bmaod47ll] {
        opacity: 0.4;
        cursor: not-allowed;
        background: linear-gradient(145deg, #6b7280, #9ca3af);
        color: #d1d5db;
        transform: none !important;
        box-shadow: none !important;
    }

    .pagination-btn.page-number[b-1bmaod47ll] {
        min-width: 10px;
        width: auto;
        padding: 0 12px;
    }

.customer-row[b-1bmaod47ll] {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.market-flag[b-1bmaod47ll] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Journey Link Styles */
.journey-link[b-1bmaod47ll] {
    color: #1e40af;
    text-decoration: none;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    position: relative;
    font-size: inherit;
    display: inline-block;
    overflow: hidden;
}

    .journey-link[b-1bmaod47ll]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(30, 64, 175, 0.1), transparent);
        transition: left 0.3s ease;
    }

    .journey-link:hover[b-1bmaod47ll]::before {
        left: 100%;
    }

    .journey-link:hover[b-1bmaod47ll] {
        color: #1e3a8a;
        background: rgba(30, 64, 175, 0.05);
        transform: translateY(-1px);
    }

    .journey-link:active[b-1bmaod47ll] {
        transform: translateY(0);
    }

    .journey-link:focus[b-1bmaod47ll] {
        outline: 2px solid rgba(30, 64, 175, 0.5);
        outline-offset: 2px;
    }

/* Modals - General */
.modal-overlay[b-1bmaod47ll] {
    position: fixed;
    top: 0;
    left: 5rem;
    right: 0;
    bottom: 0;
    background: rgb(0 0 0 / 80%);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-content[b-1bmaod47ll] {
    position: relative;
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 1200px;
    background-color: white;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn-b-1bmaod47ll 0.3s ease-out;
}

.modal-header[b-1bmaod47ll] {
    padding: 40px 38px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #f9fafb, #ffffff);
    position: relative;
}

    .modal-header h3[b-1bmaod47ll] {
        margin: 0 0 8px 0;
        font-size: 1.5rem;
        font-weight: 700;
        color: #374151;
    }

.modal-subtitle[b-1bmaod47ll] {
    margin: 0;
    font-size: 0.95rem;
    color: #6b7280;
}

.modal-close[b-1bmaod47ll] {
    position: absolute;
    top: 0;
    right: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    color: #6b7280;
    transition: all 0.2s ease;
}

    .modal-close:hover[b-1bmaod47ll] {
        transform: scale(1.1);
    }

    .modal-close:active[b-1bmaod47ll] {
        transform: scale(0.95);
    }

.modal-body[b-1bmaod47ll] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.customer-search[b-1bmaod47ll] {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.search-container[b-1bmaod47ll] {
    position: relative;
    display: flex;
    align-items: center;
}

.customer-search .search-input[b-1bmaod47ll] {
    flex: 1;
    padding: 12px 40px 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.95rem;
    background: white;
    transition: all 0.3s ease;
}

    .customer-search .search-input:focus[b-1bmaod47ll] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
    }

.clear-search-btn[b-1bmaod47ll] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: #6b7280;
    transition: all 0.2s ease;
}

    .clear-search-btn:hover[b-1bmaod47ll] {
        background: #f3f4f6;
        color: #374151;
    }

.search-results-info[b-1bmaod47ll] {
    margin-top: 12px;
}

    .search-results-info p[b-1bmaod47ll] {
        margin: 0;
        font-size: 0.9rem;
        color: #6b7280;
        font-style: italic;
    }

.customer-table-wrapper[b-1bmaod47ll] {
    position: relative;
    overflow-x: auto;
}

.customer-table[b-1bmaod47ll] {
    width: 100%;
    border-collapse: collapse;
}

/* Stages Modal Specifics */
.stages-table-container[b-1bmaod47ll] {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 24px;
    overflow: auto;
}

.stages-summary[b-1bmaod47ll] {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    overflow: hidden;
}

.summary-card[b-1bmaod47ll] {
    background: white;
    padding: 24px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    transition: transform 0.2s ease;
    flex: 1;
    margin-bottom: 2rem;
    min-width: 0;
}

    .summary-card:hover[b-1bmaod47ll] {
        transform: translateY(-2px);
    }

    .summary-card h4[b-1bmaod47ll] {
        margin: 0 0 12px 0;
        font-size: 0.9rem;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.summary-value[b-1bmaod47ll] {
    font-size: 1.8rem;
    font-weight: 700;
    color: #111827;
    display: block;
}

.stages-table thead[b-1bmaod47ll] {
    background: #f9fafb;
    position: relative;
    top: 0;
    z-index: 10;
}

.stage-journey-col[b-1bmaod47ll],
.stage-journey-cell[b-1bmaod47ll] {
    width: 20%;
}

.stage-name-col[b-1bmaod47ll],
.stage-name-cell[b-1bmaod47ll] {
    width: 25%;
}

.stage-contacts-col[b-1bmaod47ll],
.stage-contacts-cell[b-1bmaod47ll] {
    width: 15%;
    text-align: left;
}

.stage-goal-col[b-1bmaod47ll],
.stage-goal-cell[b-1bmaod47ll] {
    width: 15%;
    text-align: left;
}

.stage-revenue-col[b-1bmaod47ll],
.stage-revenue-cell[b-1bmaod47ll] {
    width: 20%;
    text-align: left;
}

.stage-progress-col[b-1bmaod47ll],
.stage-progress-cell[b-1bmaod47ll] {
    width: 80px; /* Fixed width */
    min-width: 80px;
    text-align: center;
}

.stage-row[b-1bmaod47ll] {
    transition: all 0.2s ease;
    border-bottom: 1px solid #f3f4f6;
}

    .stage-row:hover[b-1bmaod47ll] {
        background: #f9fafb;
    }

.stage-info[b-1bmaod47ll] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stage-name[b-1bmaod47ll] {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
}

.stage-description[b-1bmaod47ll] {
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.4;
}

.contact-count[b-1bmaod47ll] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.count-number[b-1bmaod47ll] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
}

.count-percentage[b-1bmaod47ll] {
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 500;
}

.goal-count[b-1bmaod47ll] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.goal-number[b-1bmaod47ll] {
    font-size: 1rem;
    color: black;
}




.journey-name[b-1bmaod47ll] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e40af;
    line-height: 1.3;
}

/* Global Tooltip */
.global-tooltip[b-1bmaod47ll] {
    position: fixed;
    background: rgba(0, 0, 0, 0.95);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    white-space: normal;
    max-width: 320px;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(-8px);
}

    .global-tooltip.show[b-1bmaod47ll] {
        opacity: 1;
        visibility: visible;
        transform: translateY(-4px);
    }

/* Info Icons and Tooltips */
.info-icon-container[b-1bmaod47ll] {
    position: relative;
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
}

.info-icon[b-1bmaod47ll] {
    color: #6b7280;
    cursor: help;
    transition: all 0.2s ease;
    vertical-align: middle;
}

    .info-icon:hover[b-1bmaod47ll] {
        color: #4b5563;
        transform: scale(1.1);
    }



/* Responsive tooltip adjustments */
@media (max-width: 768px) {
    .info-tooltip[b-1bmaod47ll] {
        max-width: 280px;
        font-size: 12px;
        padding: 10px 14px;
    }

    .chart-header h3[b-1bmaod47ll] {
        align-items: flex-start;
        line-height: 1.3;
    }
}

/* Journey Toggle Controls */
.journey-toggles[b-1bmaod47ll] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.journey-toggle[b-1bmaod47ll] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

    .journey-toggle:hover[b-1bmaod47ll] {
        background: #f3f4f6;
    }

    .journey-toggle input[type="checkbox"][b-1bmaod47ll] {
        margin: 0;
        cursor: pointer;
    }

.toggle-text[b-1bmaod47ll] {
    color: #374151;
    font-weight: 500;
    white-space: nowrap;
}

/* Animations */
.kpi-card.animating[b-1bmaod47ll] {
    animation: currencyPulse-b-1bmaod47ll 0.6s ease-in-out;
}

.chart-container.animating[b-1bmaod47ll] {
    animation: chartFade-b-1bmaod47ll 0.5s ease-in-out;
}

.currency-loading[b-1bmaod47ll]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.2), transparent);
    animation: shimmer-b-1bmaod47ll 1.5s infinite;
}

@keyframes headerGlow-b-1bmaod47ll {
    0% {
        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);
    }

    100% {
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

@keyframes iconGlow-b-1bmaod47ll {
    0% {
        filter: drop-shadow(0 2px 8px rgba(96, 165, 250, 0.4));
        transform: scale(1);
    }

    100% {
        filter: drop-shadow(0 4px 12px rgba(96, 165, 250, 0.6));
        transform: scale(1.03);
    }
}

@keyframes dropdownSlide-b-1bmaod47ll {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

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

@keyframes progressWave-b-1bmaod47ll {
    0% {
        left: -100%;
        opacity: 0;
    }

    50% {
        left: 0%;
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

@keyframes spinEnhanced-b-1bmaod47ll {
    0% {
        transform: rotate(0deg) scale(1);
        border-top-color: currentColor;
    }

    50% {
        transform: rotate(180deg) scale(1.1);
        border-top-color: rgba(255, 255, 255, 0.8);
    }

    100% {
        transform: rotate(360deg) scale(1);
        border-top-color: currentColor;
    }
}

@keyframes modalSlideIn-b-1bmaod47ll {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }

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

@keyframes fadeIn-b-1bmaod47ll {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes currencyPulse-b-1bmaod47ll {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes chartFade-b-1bmaod47ll {
    0% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.8;
    }
}

@keyframes shimmer-b-1bmaod47ll {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .comparison-charts[b-1bmaod47ll] {
        grid-template-columns: 1fr;
    }

    .chart-header[b-1bmaod47ll] {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

        .chart-header h3[b-1bmaod47ll] {
            text-align: center;
            min-width: auto;
        }

    .filters-section[b-1bmaod47ll] {
        flex-direction: column;
        align-items: stretch;
    }

    .filters-left[b-1bmaod47ll] {
        width: 100%;
        justify-content: space-between;
    }

    .filter-group[b-1bmaod47ll] {
        flex: 1;
        min-width: 0;
    }

    .custom-select[b-1bmaod47ll] {
        min-width: auto;
        width: 100%;
    }

    .chart-filter-dropdown[b-1bmaod47ll] {
        margin-left: 0;
        align-self: center;
    }

    .filter-group:has([for="journeyFilter"]) .custom-select[b-1bmaod47ll],
    .filter-group:has([for="goalFilter"]) .custom-select[b-1bmaod47ll] {
        max-width: 300px;
    }
}

@media (max-width: 768px) {
    .journey-dashboard[b-1bmaod47ll] {
        padding: 10px;
    }

    .dashboard-header[b-1bmaod47ll] {
        margin-bottom: 30px;
        padding: 32px 24px;
        border-radius: 12px;
    }

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

    .title-icon[b-1bmaod47ll] {
        width: 32px;
        height: 32px;
    }

    .dashboard-subtitle[b-1bmaod47ll] {
        font-size: 1rem;
    }

    .filters-section[b-1bmaod47ll] {
        padding: 15px 10px;
        margin-bottom: 20px;
    }

    .filters-left[b-1bmaod47ll] {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

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

        .filter-group:has(.select-options)[b-1bmaod47ll] {
            z-index: 1000;
        }

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

    .select-trigger[b-1bmaod47ll] {
        width: 100% !important;
        box-sizing: border-box;
    }

    .select-options[b-1bmaod47ll] {
        z-index: 1001;
    }

    .filter-group:has([for="goalFilter"]) .custom-select[b-1bmaod47ll],
    .filter-group:has([for="journeyFilter"]) .custom-select[b-1bmaod47ll] {
        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[b-1bmaod47ll],
    .filter-group:has([for="journeyFilter"]) .select-trigger[b-1bmaod47ll] {
        width: 100% !important;
        min-width: unset !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
    }

    .kpi-section[b-1bmaod47ll] {
        grid-template-columns: 1fr;
    }

    .kpi-card[b-1bmaod47ll] {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .kpi-side-by-side[b-1bmaod47ll] {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .chart-wrapper[b-1bmaod47ll] {
        height: 300px;
        padding: 15px;
    }

    .half-width .chart-wrapper[b-1bmaod47ll] {
        height: 280px;
    }

    .table-controls[b-1bmaod47ll] {
        flex-direction: column;
        width: 100%;
    }

    .search-input[b-1bmaod47ll] {
        min-width: auto;
        width: 100%;
    }

    .chart-controls[b-1bmaod47ll] {
        width: 100%;
        justify-content: center;
    }

    .table-footer[b-1bmaod47ll],
    .modal-footer[b-1bmaod47ll],
    .stages-footer[b-1bmaod47ll] {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        text-align: center;
    }

    .pagination-controls[b-1bmaod47ll] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .pagination-btn[b-1bmaod47ll] {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

        .pagination-btn.page-number[b-1bmaod47ll] {
            min-width: 10px;
            padding: 0 8px;
        }

    .chart-filter-dropdown .custom-select[b-1bmaod47ll] {
        min-width: 100px;
        max-width: 150px;
        z-index: 1000;
    }

    .chart-filter-dropdown .select-options[b-1bmaod47ll] {
        z-index: 1001;
    }

    .filter-checkbox-option[b-1bmaod47ll] {
        padding: 10px 12px;
    }

    .checkbox-label[b-1bmaod47ll] {
        font-size: 12px;
    }

    .chart-header-controls[b-1bmaod47ll] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .view-toggle-buttons[b-1bmaod47ll] {
        justify-content: center;
        align-self: center;
        width: fit-content;
    }

    .comparison-table-wrapper[b-1bmaod47ll] {
        padding: 16px;
        height: 300px;
    }

    .comparison-table th[b-1bmaod47ll],
    .comparison-table td[b-1bmaod47ll] {
        padding: 10px 12px;
        font-size: 12px;
    }

    .journey-name-cell[b-1bmaod47ll] {
        max-width: 120px;
        font-size: 12px;
    }

    .stage-journey-col[b-1bmaod47ll] {
        width: 25%;
    }

    .stage-name-col[b-1bmaod47ll] {
        width: 30%;
    }

    .stage-contacts-col[b-1bmaod47ll] {
        width: 15%;
    }

    .stage-goal-col[b-1bmaod47ll] {
        width: 15%;
    }

    .stage-revenue-col[b-1bmaod47ll] {
        width: 15%;
    }

    .stage-progress-col[b-1bmaod47ll] {
        width: 10%;
    }

    .journey-name[b-1bmaod47ll] {
        font-size: 0.8rem;
    }

    .stage-description[b-1bmaod47ll] {
        display: none;
    }

    .kpi-submetric[b-1bmaod47ll] {
        margin-top: 6px;
        padding-top: 6px;
    }

    .submetric-value[b-1bmaod47ll] {
        font-size: 0.85rem;
    }

    .submetric-rate[b-1bmaod47ll] {
        font-size: 0.8rem;
    }

    .stages-modal-content[b-1bmaod47ll] {
        width: 98vw;
        height: 95vh;
        border-radius: 12px;
    }

    .stages-modal-header[b-1bmaod47ll] {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .stages-modal-title[b-1bmaod47ll] {
        font-size: 1.4rem;
        gap: 12px;
    }

    .stages-modal-subtitle[b-1bmaod47ll] {
        font-size: 0.9rem;
    }

    .stages-modal-close[b-1bmaod47ll] {
        position: absolute;
        top: 16px;
        right: 16px;
        padding: 8px;
        color: #000000;
    }

    .stages-table-container[b-1bmaod47ll] {
        padding: 20px 16px;
    }

    .stages-summary[b-1bmaod47ll] {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 24px;
    }

    .summary-card h4[b-1bmaod47ll] {
        font-size: 0.8rem;
        margin-bottom: 8px;
    }

    .summary-value[b-1bmaod47ll] {
        font-size: 1.4rem;
    }

    .stage-name[b-1bmaod47ll] {
        font-size: 0.9rem;
    }

    .count-number[b-1bmaod47ll] {
        font-size: 1rem;
    }

    .count-percentage[b-1bmaod47ll] {
        font-size: 0.7rem;
    }

    .revenue-amount[b-1bmaod47ll] {
        font-size: 1rem;
        color: black
    }

    .progress-circle[b-1bmaod47ll] {
        width: 32px;
        height: 32px;
        font-size: 0.65rem;
    }

    .kpi-equal-value[b-1bmaod47ll] {
        text-align: center;
    }

    .kpi-value-equal[b-1bmaod47ll] {
        font-size: 1.4rem;
    }

    .kpi-label-equal[b-1bmaod47ll] {
        font-size: 0.75rem;
    }

    .kpi-secondary-metric[b-1bmaod47ll] {
        margin-top: 8px;
        padding-top: 8px;
    }

    .kpi-value-secondary[b-1bmaod47ll] {
        font-size: 1.2rem;
    }

    .kpi-label-secondary[b-1bmaod47ll] {
        font-size: 0.75rem;
    }
}

@media (max-width: 634px) {
    .stages-modal-overlay[b-1bmaod47ll],
    .modal-overlay[b-1bmaod47ll] {
        left: 0 !important;
        padding: 0 !important;
    }

    .revenue-amount[b-h15aahk23u][b-1bmaod47ll] { /* 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[b-1bmaod47ll],
    .modal-content[b-1bmaod47ll] {
        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[b-1bmaod47ll] {
        height: calc(100vh - 5rem) !important; /* Adjusted for regular modal */
        margin-top: 5rem !important; /* Adjusted for regular modal */
    }

    .stages-modal-content[b-1bmaod47ll] {
        margin-top: 10rem 160px !important; /* Original, may need review */
    }

    .stages-modal-header[b-1bmaod47ll],
    .modal-header[b-1bmaod47ll] {
        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[b-1bmaod47ll] {
        margin: 0; /* Remove extra margin */
    }

        .stages-modal-title[b-1bmaod47ll],
        .modal-header h3[b-1bmaod47ll] {
            font-size: 1.2rem !important;
            gap: 8px !important; /* Stages specific */
            margin: 0 !important;
        }

        .modal-header h3[b-1bmaod47ll] {
            padding-right: 40px !important;
        }

    .stages-modal-subtitle[b-1bmaod47ll],
    .modal-subtitle[b-1bmaod47ll] {
        font-size: 0.8rem !important;
        margin: 0 !important;
    }

    .stages-modal-close[b-1bmaod47ll],
    .modal-close[b-1bmaod47ll] {
        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[b-1bmaod47ll],
    .modal-body[b-1bmaod47ll] { /* 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[b-1bmaod47ll] {
        padding: 0 !important; /* Override for regular modal */
        overflow: hidden !important; /* Override for regular modal */
    }

    .stages-summary[b-1bmaod47ll] {
        flex-direction: row !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
        flex-shrink: 0 !important;
    }

    .summary-card[b-1bmaod47ll] {
        padding: 12px 8px !important;
        text-align: center !important;
        flex: 1 !important;
        min-height: auto !important;
    }

        .summary-card h4[b-1bmaod47ll] {
            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[b-1bmaod47ll] {
        font-size: 1rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }

    .stages-table-wrapper[b-1bmaod47ll],
    .customer-table-wrapper[b-1bmaod47ll] {
        border-radius: 8px !important; /* Stages specific */
        font-size: 0.8rem !important; /* Stages specific */
        flex: 1 !important;
        overflow: auto !important;
    }

    .customer-table-wrapper[b-1bmaod47ll] {
        padding: 0 8px !important; /* Override for regular modal */
    }

    .stages-table th[b-1bmaod47ll] {
        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[b-1bmaod47ll] {
        padding: 8px 4px !important; /* Override for regular modal */
        font-size: 0.7rem !important; /* Override for regular modal */
    }

    .stages-table td[b-1bmaod47ll],
    .customer-table td[b-1bmaod47ll] {
        padding: 6px 3px !important; /* Stages specific */
        font-size: 0.7rem !important; /* Stages specific */
    }

    .customer-table td[b-1bmaod47ll] {
        padding: 8px 4px !important; /* Override for regular modal */
        border-bottom: 1px solid #f3f4f6 !important; /* Override for regular modal */
    }

    .stages-table th.stage-journey-col[b-1bmaod47ll],
    .stages-table td.stage-journey-cell[b-1bmaod47ll] {
        width: 20% !important;
        display: table-cell !important;
    }

    .stages-table th.stage-name-col[b-1bmaod47ll],
    .stages-table td.stage-name-cell[b-1bmaod47ll] {
        width: 25% !important;
        display: table-cell !important;
    }

    .stages-table th.stage-contacts-col[b-1bmaod47ll],
    .stages-table td.stage-contacts-cell[b-1bmaod47ll] {
        width: 15% !important;
        display: table-cell !important;
    }

    .stages-table th.stage-goal-col[b-1bmaod47ll],
    .stages-table td.stage-goal-cell[b-1bmaod47ll] {
        width: 15% !important;
        display: table-cell !important;
    }

    .stages-table th.stage-revenue-col[b-1bmaod47ll],
    .stages-table td.stage-revenue-cell[b-1bmaod47ll] {
        width: 15% !important;
        display: table-cell !important;
    }

    .stages-table th.stage-progress-col[b-1bmaod47ll],
    .stages-table td.stage-progress-cell[b-1bmaod47ll] {
        width: 10% !important;
        display: table-cell !important;
    }

    .journey-name[b-1bmaod47ll] {
        font-size: 0.65rem !important;
        line-height: 1.1 !important;
        color: #1e40af !important;
        font-weight: 600 !important;
    }

    .stage-name[b-1bmaod47ll] {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
    }

    .stage-description[b-1bmaod47ll] {
        display: none !important;
    }

    .count-number[b-1bmaod47ll] {
        font-size: 0.8rem !important;
        font-weight: 700 !important;
    }

    .count-percentage[b-1bmaod47ll] {
        font-size: 0.6rem !important;
        opacity: 0.8 !important;
    }

    .stages-footer[b-1bmaod47ll],
    .modal-footer[b-1bmaod47ll] {
        padding: 8px 12px !important;
        flex-direction: column !important;
        gap: 6px !important;
        text-align: center !important;
        flex-shrink: 0 !important;
    }

        .stages-footer .pagination-info p[b-1bmaod47ll],
        .modal-footer .pagination-info p[b-1bmaod47ll] {
            font-size: 0.75rem !important;
        }

        .stages-footer .pagination-btn[b-1bmaod47ll],
        .modal-footer .pagination-btn[b-1bmaod47ll] {
            width: 26px !important;
            height: 26px !important;
            font-size: 0.65rem !important;
        }

            .stages-footer .pagination-btn.page-number[b-1bmaod47ll],
            .modal-footer .pagination-btn.page-number[b-1bmaod47ll] {
                min-width: 26px !important;
                padding: 0 3px !important;
            }

        .stages-footer .pagination-controls[b-1bmaod47ll],
        .modal-footer .pagination-controls[b-1bmaod47ll] {
            gap: 3px !important;
        }

    .customer-search[b-1bmaod47ll] {
        padding: 12px 8px !important;
        flex-shrink: 0 !important;
    }

        .customer-search .search-input[b-1bmaod47ll] {
            font-size: 0.85rem !important;
            padding: 10px 35px 10px 12px !important;
        }

    .search-results-info p[b-1bmaod47ll] {
        font-size: 0.75rem !important;
        margin-top: 8px !important;
    }

    .market-flag .flag-icon[b-1bmaod47ll] {
        width: 16px !important;
        height: 12px !important;
    }

    .progress-container[b-1bmaod47ll] {
        gap: 4px !important;
    }

    .progress-bar[b-1bmaod47ll] {
        height: 6px !important;
        min-width: 30px !important;
    }

    .progress-text[b-1bmaod47ll] {
        font-size: 0.6rem !important;
        min-width: 24px !important;
    }

    .no-customers[b-1bmaod47ll] {
        padding: 40px 20px !important;
        font-size: 0.9rem !important;
    }
}

/* Make title + subtitle a single left-side block in the header */
.chart-title-group[b-1bmaod47ll] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0; /* allows wrapping instead of overflowing */
    flex: 1 1 auto; /* lets controls sit on the right */
}

.chart-title-row[b-1bmaod47ll] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.chart-subtitle[b-1bmaod47ll] {
    margin: 2px 0 0 0; /* starts exactly under the title text */
    font-size: var(--lv-font-size-small);
    color: var(--lv-text-secondary);
    line-height: 1.4;
}

/* KPI Overview: place AOV + AOF side-by-side */
.view-container.kpi-view[b-1bmaod47ll] {
    display: grid; /* override the base flex */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--lv-spacing-unit) * 3);
    align-items: start;
}

    /* Avoid extra spacing since grid has gap */
    .view-container.kpi-view .chart-container[b-1bmaod47ll] {
        margin-bottom: 0;
    }

/* Stack on smaller screens */
@media (max-width: 1024px) {
    .view-container.kpi-view[b-1bmaod47ll] {
        grid-template-columns: 1fr;
    }
}

/* full-width block inside KPI view (spans whole grid/row) */
.kpi-view .full-width[b-1bmaod47ll] {
    width: 100%;
    grid-column: 1 / -1;
}


/* Put title and dropdown on the same line */
.chart-header.no-wrap[b-1bmaod47ll] {
    display: flex;
    align-items: baseline; /* lines up with the H3’s baseline */
    justify-content: space-between; /* pushes dropdown to the right */
    gap: 12px;
    flex-wrap: nowrap; /* prevents wrapping */
}

.chart-title-group[b-1bmaod47ll] {
    min-width: 0;
    flex: 1 1 auto; /* lets the title take remaining space */
}

.chart-title-row[b-1bmaod47ll] {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chart-header-controls.inline-right[b-1bmaod47ll] {
    margin-left: auto; /* keep it on the same row, right side */
    display: flex;
    align-items: center;
}

/* --- Compact dropdown --- */
.custom-select.select-compact[b-1bmaod47ll] {
    width: fit-content;
    font-size: .9rem;
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--panel, #fff);
    border-radius: 8px;
    position: relative;
}

    .custom-select.select-compact .select-trigger[b-1bmaod47ll] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 32px; /* smaller height */
        padding: 0 10px; /* tighter padding */
        cursor: pointer;
    }

.custom-select .select-arrow[b-1bmaod47ll] {
    width: 16px;
    height: 16px;
    transition: transform .2s ease;
}

    .custom-select .select-arrow.rotated[b-1bmaod47ll] {
        transform: rotate(180deg);
    }

.custom-select .select-options[b-1bmaod47ll] {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 160px;
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--panel, #fff);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    z-index: 20;
}

.custom-select .select-option[b-1bmaod47ll] {
    padding: 8px 10px;
    font-size: .9rem;
    line-height: 1.2;
    cursor: pointer;
}

    .custom-select .select-option:hover[b-1bmaod47ll] {
        background: #f5f6f7;
    }

    .custom-select .select-option.selected[b-1bmaod47ll] {
        background: linear-gradient(145deg, #000000, #333333);
        color: #ffffff;
        font-weight: 600;
    }

    .custom-select .select-option.selected:hover[b-1bmaod47ll] {
        background: linear-gradient(145deg, #000000, #333333);
        color: #ffffff;
        font-weight: 600;
    }

/* Optional: stack on small screens */
@media (max-width: 640px) {
    .chart-header.no-wrap[b-1bmaod47ll] {
        flex-wrap: wrap;
        align-items: center;
    }

    .chart-header-controls.inline-right[b-1bmaod47ll] {
        margin-left: 0;
    }
}

/* remove the narrow underline that sits only under the title */
.brand-share-section .chart-title-group h3[b-1bmaod47ll],
.brand-share-section h3.chart-title-row[b-1bmaod47ll] {
    border-bottom: 0 !important;
    padding-bottom: 0;
}

/* draw one full-width rule across the whole header (under the dropdown too) */
.brand-share-section .chart-header[b-1bmaod47ll] {
    border-bottom: 1px solid var(--lv-border-primary) !important;
    position: relative;
}

    /* optional: if you prefer the gradient line, do it as a full-bleed pseudo-element */
    .brand-share-section .chart-header[b-1bmaod47ll]::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--lv-border-primary), transparent);
        /* remove if you keep the border-bottom above to avoid double lines */
    }



/* stronger selectors so they beat `.lv-table td { color: ... }` */
.lv-table td.money-neg[b-1bmaod47ll],
.lv-table td .money-neg[b-1bmaod47ll] {
    color: #b91c1c !important;
    font-weight: 600;
}
/* red */

.lv-table td.money-pos[b-1bmaod47ll],
.lv-table td .money-pos[b-1bmaod47ll] {
    color: #065f46 !important;
    font-weight: 600;
}

/* /Pages/CustomerDashboard.razor.rz.scp.css */
.dashboard-page-root[b-boac2mctiy] {
    /* Existing styles */
    font-family: var(--dashboard-font-main);
    color: var(--dashboard-text-primary);
    background-color: var(--dashboard-background-primary);
    padding: calc(2 * var(--dashboard-spacing-unit));
    /* Styles from div.page-root.lv-theme */
    position: absolute;
    top: 5rem;
    left: 220px;
    right: 0;
    min-height: calc(100vh - 5rem);
    z-index: 2 !important;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    /* Consider overflow-y: auto; for dashboard page if it's meant to scroll its entire content */
    /* The original lv-theme had overflow-y: hidden; which implies child elements handle scrolling. */
    /* If the dashboard sections themselves are meant to scroll within a fixed page, hidden is okay. */
    /* If the whole dashboard page is meant to scroll when content is long, auto is better. */
    /* Given the structure of the dashboard (hero, kpi cards, sections), auto on the root seems more appropriate. */
    overflow-y: auto; /* Changed from hidden to auto for better dashboard scroll behavior */
}

.dashboard-hero[b-boac2mctiy] {
    padding-bottom: calc(2 * var(--dashboard-spacing-unit));
    border-bottom: 1px solid var(--dashboard-border-color);
    margin-bottom: calc(3 * var(--dashboard-spacing-unit));
}

.dashboard-title-bar[b-boac2mctiy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--dashboard-spacing-unit);
}

.dashboard-hero-title[b-boac2mctiy] {
    font-family: var(--dashboard-font-heading);
    font-size: 18px;
    font-weight: 500;
    color: var(--dashboard-text-primary);
    margin: 0;
}

.dashboard-hero-subtitle[b-boac2mctiy] {
    font-size: 16px;
    color: var(--dashboard-text-secondary);
    margin: 0;
}

.dashboard-back-button[b-boac2mctiy] {
    padding: calc(0.8 * var(--dashboard-spacing-unit)) calc(1.5 * var(--dashboard-spacing-unit));
    font-size: 14px;
}

.dashboard-loading-message[b-boac2mctiy],
.dashboard-no-data-message[b-boac2mctiy] {
    font-style: italic;
    color: var(--dashboard-text-muted);
    text-align: center;
    padding: calc(3 * var(--dashboard-spacing-unit));
    font-size: 16px;
}

.kpi-cards-grid[b-boac2mctiy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: calc(2 * var(--dashboard-spacing-unit));
    margin-bottom: calc(3 * var(--dashboard-spacing-unit));
}

.kpi-card[b-boac2mctiy] {
    background-color: var(--dashboard-background-primary);
    border: 1px solid var(--dashboard-border-color);
    border-radius: var(--dashboard-border-radius);
    padding: calc(2 * var(--dashboard-spacing-unit));
    box-shadow: var(--dashboard-card-shadow);
    text-align: left;
}

.kpi-title[b-boac2mctiy] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--dashboard-text-secondary);
    margin-bottom: calc(0.75 * var(--dashboard-spacing-unit));
}

.kpi-value[b-boac2mctiy] {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--dashboard-text-primary);
}

.kpi-detail[b-boac2mctiy] {
    font-size: 0.7em;
    font-weight: normal;
    color: var(--dashboard-text-muted);
}

.dashboard-section-title[b-boac2mctiy] {
    font-family: var(--dashboard-font-heading);
    font-size: 16px;
    font-weight: 500;
    color: var(--dashboard-text-primary);
    margin-top: calc(3 * var(--dashboard-spacing-unit));
    margin-bottom: calc(1.5 * var(--dashboard-spacing-unit));
    padding-bottom: calc(0.5 * var(--dashboard-spacing-unit));
    border-bottom: 1px solid var(--dashboard-border-color);
}

.market-summary-section ul.market-list[b-boac2mctiy] {
    list-style: none;
    padding-left: 0;
}

.market-summary-section li.market-list-item[b-boac2mctiy] {
    padding: calc(0.5 * var(--dashboard-spacing-unit)) 0;
    font-size: 15px;
}

.market-name[b-boac2mctiy] {
    font-weight: 500;
}

.market-count[b-boac2mctiy] {
    color: var(--dashboard-text-secondary);
}

.dashboard-table-wrapper[b-boac2mctiy] {
    overflow-x: auto;
}

.dashboard-table[b-boac2mctiy] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-top: var(--dashboard-spacing-unit);
}

    .dashboard-table th[b-boac2mctiy],
    .dashboard-table td[b-boac2mctiy] {
        border: 1px solid var(--dashboard-border-color);
        padding: var(--dashboard-spacing-unit) calc(1.25 * var(--dashboard-spacing-unit));
        text-align: left;
        vertical-align: middle;
    }

    .dashboard-table th[b-boac2mctiy] {
        background-color: var(--dashboard-background-secondary);
        font-weight: 500;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .dashboard-table td.text-right[b-boac2mctiy] {
        text-align: right;
    }

    .dashboard-table td.text-center[b-boac2mctiy] {
        text-align: center;
    }

    .dashboard-table tbody tr:hover[b-boac2mctiy] {
        background-color: #f0f0f0;
    }

.dashboard-button-secondary[b-boac2mctiy] {
    background-color: #121212e3;
    color: white;
    border: 1px solid #6c757d;
    padding: calc(0.75 * var(--dashboard-spacing-unit)) calc(1.5 * var(--dashboard-spacing-unit));
    font-size: 14px;
    border-radius: var(--dashboard-border-radius);
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

    .dashboard-button-secondary:hover[b-boac2mctiy] {
        background-color: #5a6268;
        border-color: #545b62;
    }

.dashboard-dimmed-message[b-boac2mctiy] {
    font-size: 13px;
    color: var(--dashboard-text-muted);
    margin-top: var(--dashboard-spacing-unit);
}

/* Order Modal Styles - Luxury Inspired Design */
.modal-overlay[b-boac2mctiy] {
    display: none; /* Initially hidden, will be shown by JS/Blazor */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Darker overlay */
    justify-content: center;
    align-items: center;
    z-index: 1050;
    backdrop-filter: blur(10px); /* Frosted glass effect */
}

    .modal-overlay.show[b-boac2mctiy] {
        display: flex; /* Show when active */
    }

.modal-content[b-boac2mctiy] {
    background: #fff;
    border-radius: 0; /* Squared edges */
    width: 90%;
    max-width: 750px; /* Max width */
    max-height: 92vh; /* Max height to leave some space */
    overflow-y: auto; /* Scrollable content */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); /* Stronger shadow */
    opacity: 0;
    transform: translateY(-30px); /* Initial state for animation */
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

    .modal-content.active[b-boac2mctiy] {
        opacity: 1;
        transform: translateY(0); /* Active state for animation */
    }

.modal-header[b-boac2mctiy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 30px; /* Generous padding */
    /* border-bottom: 1px solid #d4b572; /* Gold border */
    color: #d4b572; /* Gold text for elements other than h5 */
}

    .modal-header h5[b-boac2mctiy] {
        font-size: 1.5rem;
        font-weight: 300; /* Elegant thin font weight */
        color: #23201c; /* Dark, rich color for title */
        margin: 0;
        letter-spacing: 3px; /* Wide letter spacing */
        text-transform: uppercase; /* Uppercase title */
    }

        /* Ensure h5 strong styling */
        .modal-header h5 strong[b-boac2mctiy] {
            font-weight: 500; /* Or whatever your desired weight is for the name */
        }


.modal-body[b-boac2mctiy] {
    padding: 32px;
    background-color: #fff; /* Or a very light off-white like #fafafa */
    color: #333; /* Primary text color */
}

.close-button[b-boac2mctiy] {
    background: none;
    border: none;
    font-size: 1.5rem; /* Larger close icon */
    cursor: pointer;
    color: #23201c; /* Match dark header text */
    transition: all 0.2s;
    line-height: 1;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .close-button:hover[b-boac2mctiy] {
        color: #d4b572; /* Gold on hover */
        transform: rotate(90deg); /* Rotate effect */
    }

/* Luxury Section Styles */
.order-details-section[b-boac2mctiy], .order-items-section[b-boac2mctiy], .order-summary-section[b-boac2mctiy] {
    margin-bottom: 36px; /* Increased spacing */
    background-color: #ffffff; /* Pure white sections */
    padding: 30px; /* Ample padding */
    border: 1px solid #e5e5e5; /* Subtle border */
    position: relative; /* For pseudo-element */
}

    .order-details-section[b-boac2mctiy]::before, .order-items-section[b-boac2mctiy]::before, .order-summary-section[b-boac2mctiy]::before {
        content: '';
        position: absolute;
        top: 10px; /* Inset border */
        left: 10px;
        right: 10px;
        bottom: 10px;
        border: 1px solid #d4b572; /* Gold decorative border */
        pointer-events: none; /* Click through */
        opacity: 0.3; /* Subtle opacity */
    }

    .order-details-section h6[b-boac2mctiy], .order-items-section h6[b-boac2mctiy], .order-summary-section h6[b-boac2mctiy] {
        font-weight: 300; /* Light font for section titles */
        margin-bottom: 25px;
        color: #1a1a1a; /* Darker text for titles */
        padding-bottom: 12px;
        font-size: 1.2rem;
        letter-spacing: 2px; /* Spaced out letters */
        text-transform: uppercase;
        position: relative; /* For ::after pseudo-element */
        text-align: center; /* Centered titles */
    }

        .order-details-section h6[b-boac2mctiy]::after, .order-items-section h6[b-boac2mctiy]::after, .order-summary-section h6[b-boac2mctiy]::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px; /* Width of underline */
            height: 1px;
            background-color: #d4b572; /* Gold underline */
        }

    .order-details-section p[b-boac2mctiy] {
        margin-bottom: 16px; /* Spacing between details */
        display: flex;
        align-items: baseline;
        justify-content: space-between; /* Align text to ends */
        border-bottom: 1px solid #f5f5f5; /* Subtle separator */
        padding-bottom: 8px;
    }

        .order-details-section p strong[b-boac2mctiy] {
            color: #1a1a1a; /* Dark text for labels */
            font-weight: 400; /* Normal weight for labels */
            letter-spacing: 1px; /* Spacing for labels */
            text-transform: uppercase;
            font-size: 0.9rem;
            white-space: nowrap; /* Prevent label wrapping */
            margin-right: 10px; /* Space between label and value */
        }

        .order-details-section p span[b-boac2mctiy] {
            font-weight: 500; /* Slightly bolder for values */
            color: #333; /* Standard text color for values */
            text-align: right; /* Align values to the right */
        }

/* Table Styles (within modal) */
.table[b-boac2mctiy] { /* Targets .table inside .order-items-section */
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0; /* Remove default table margin */
    color: #333; /* Table text color */
    border: none; /* Remove outer border if any */
    background-color: transparent; /* Ensure no background color */
}

    .table thead th[b-boac2mctiy] {
        vertical-align: bottom;
        border-bottom: 1px solid #d4b572; /* Gold underline for headers */
        padding: 16px 18px;
        background-color: #f8f8f8; /* Very light grey for header background */
        color: #1a1a1a; /* Dark text for headers */
        font-weight: 400; /* Normal weight */
        text-align: left;
        font-size: 0.9rem;
        white-space: nowrap; /* Prevent header text wrapping */
        letter-spacing: 1px;
        text-transform: uppercase;
    }

        .table thead th.has-tooltip[b-boac2mctiy]::after { /* Style for tooltip indicator */
            content: "\2139";
            font-size: 0.8em;
            vertical-align: super;
            margin-left: 4px;
            color: #aaa;
        }


    .table tbody tr[b-boac2mctiy] {
        border-bottom: 1px solid #f5f5f5; /* Light separator for rows */
    }

        .table tbody tr:last-child[b-boac2mctiy] {
            border-bottom: none; /* No border for the last row */
        }

    .table td[b-boac2mctiy] {
        padding: 12px 18px; /* Padding for table cells */
        vertical-align: middle;
        font-size: 13px; /* Slightly smaller font for table data */
    }

/* Brand Tags */
.brand-tags[b-boac2mctiy] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px; /* Space between tags */
    margin-top: 25px;
    min-height: 100px; /* Minimum height for the section */
    align-content: flex-start; /* Align tags to the start if they wrap */
    justify-content: center; /* Center tags if they don't fill width */
}

.brand-tag[b-boac2mctiy] {
    background-color: #f8f8f8; /* Light background for tags */
    padding: 10px 20px;
    color: #1a1a1a; /* Dark text */
    font-size: 0.9rem;
    font-weight: 400; /* Normal weight */
    display: inline-block;
    transition: all 0.3s;
    border: 1px solid #e5e5e5; /* Subtle border */
    letter-spacing: 1px; /* Spacing for tag text */
    position: relative; /* For pseudo-element */
}

    .brand-tag[b-boac2mctiy]::before {
        content: '';
        position: absolute;
        top: 3px; /* Inset border */
        left: 3px;
        right: 3px;
        bottom: 3px;
        border: 1px solid #d4b572; /* Gold decorative border */
        opacity: 0; /* Hidden by default */
        transition: opacity 0.3s;
    }

    .brand-tag:hover[b-boac2mctiy] {
        transform: translateY(-3px); /* Slight lift on hover */
        box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* Subtle shadow on hover */
    }

        .brand-tag:hover[b-boac2mctiy]::before {
            opacity: 1; /* Show gold border on hover */
        }

.no-brands[b-boac2mctiy], .no-items[b-boac2mctiy] {
    color: #999; /* Muted text for empty states */
    font-style: italic;
    text-align: center;
    letter-spacing: 1px; /* Match other text styling */
    width: 100%; /* Ensure it takes full width to center properly */
    padding: 20px 0;
}


.modal-body[b-boac2mctiy] {
    padding: 20px;
}
/* Adjusted padding */

.order-details-section[b-boac2mctiy], .order-items-section[b-boac2mctiy], .order-summary-section[b-boac2mctiy] {
    padding: 20px; /* Adjusted padding */
    margin-bottom: 20px; /* Adjusted margin */
}

    .order-details-section h6[b-boac2mctiy], .order-items-section h6[b-boac2mctiy], .order-summary-section h6[b-boac2mctiy] {
        margin-bottom: 20px; /* Adjusted margin */
        font-size: 1.1rem; /* Slightly smaller title */
    }

    .order-details-section p[b-boac2mctiy] {
        flex-direction: column; /* Stack label and value */
        align-items: flex-start; /* Align to start */
        margin-bottom: 12px;
    }

        .order-details-section p strong[b-boac2mctiy] {
            margin-bottom: 4px;
            font-size: 0.85rem;
        }

        .order-details-section p span[b-boac2mctiy] {
            text-align: left;
            font-size: 0.95rem;
        }


.modal-header h5[b-boac2mctiy] {
    font-size: 1.2rem;
    letter-spacing: 1.5px;
}

/* Mobile view for order items table */
.table[b-boac2mctiy] {
    display: none !important;
}
/* Hide desktop table */
.mobile-view[b-boac2mctiy] {
    display: block;
}
    /* Show mobile card view */

    .mobile-view .card[b-boac2mctiy] {
        background: #fff;
        border: 1px solid #e5e5e5;
        margin-bottom: 12px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    .mobile-view .card-header[b-boac2mctiy] {
        padding: 10px 12px;
        border-bottom: 1px solid #e5e5e5;
        font-weight: 500;
        font-size: 0.9rem;
    }

    .mobile-view .card-body[b-boac2mctiy] {
        padding: 12px;
    }

        .mobile-view .card-body .item-info[b-boac2mctiy] {
            padding-bottom: 8px;
            margin-bottom: 8px;
            border-bottom: 1px solid #f0f0f0;
        }

            .mobile-view .card-body .item-info strong[b-boac2mctiy],
            .mobile-view .card-body .item-detail strong[b-boac2mctiy] {
                display: block;
                color: #666;
                font-size: 0.75rem;
                text-transform: uppercase;
                margin-bottom: 2px;
                white-space: nowrap;
            }

            .mobile-view .card-body .item-info span[b-boac2mctiy],
            .mobile-view .card-body .item-detail span[b-boac2mctiy] {
                font-size: 0.85rem;
                color: #333;
            }

        .mobile-view .card-body .details-grid[b-boac2mctiy] {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .mobile-view .card-body .item-detail[b-boac2mctiy] {
            display: flex;
            flex-direction: column;
        }

        .mobile-view .card-body .unit-price[b-boac2mctiy] {
            white-space: nowrap;
        }


/* Custom scrollbar for modal content */
.modal-content[b-boac2mctiy]::-webkit-scrollbar {
    width: 8px;
}

.modal-content[b-boac2mctiy]::-webkit-scrollbar-thumb {
    background: #d4b572;
    border-radius: 0;
}
/* Gold scrollbar thumb */
.modal-content[b-boac2mctiy]::-webkit-scrollbar-track {
    background: #f0f0f0;
}
@media (max-width: 767px) {
    .dashboard-page-root[b-boac2mctiy] {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        min-height: 100vh !important; /* Ensure it takes full viewport height */
        padding: var(--dashboard-spacing-unit); /* Maybe reduce padding on mobile */
        /* overflow-y: auto !important; is already good */
        /* overflow-x: hidden !important; is already good */
    }

    /* Adjust hero padding for mobile */
    .dashboard-hero[b-boac2mctiy] {
        padding: var(--dashboard-spacing-unit);
        margin-bottom: calc(2 * var(--dashboard-spacing-unit));
    }

    .dashboard-title-bar[b-boac2mctiy] {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-hero-title[b-boac2mctiy] {
        font-size: 22px; /* Slightly smaller title on mobile */
        margin-bottom: calc(0.5 * var(--dashboard-spacing-unit));
    }

    .dashboard-back-button[b-boac2mctiy] {
        margin-top: var(--dashboard-spacing-unit);
        text-align: center;
    }

    /* KPI cards might stack better if not forced into a grid that's too wide */
    .kpi-cards-grid[b-boac2mctiy] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Adjust minmax for mobile */
        gap: var(--dashboard-spacing-unit);
    }

    .kpi-card[b-boac2mctiy] {
        padding: var(--dashboard-spacing-unit);
    }

    .kpi-value[b-boac2mctiy] {
        font-size: 20px;
    }


    .dashboard-section-title[b-boac2mctiy] {
        font-size: 18px;
        margin-top: calc(2 * var(--dashboard-spacing-unit));
        margin-bottom: var(--dashboard-spacing-unit);
    }

    /* Customer list table wrapper */
    .dashboard-table-wrapper[b-boac2mctiy] {
        display: block !important; /* Ensure it behaves as a block for overflow */
        width: 100%; /* Take full available width */
        overflow-x: auto !important; /* Horizontal scrolling for table */
        overflow-y: hidden !important; /* Vertical scrolling handled by page root */
        -webkit-overflow-scrolling: touch; /* Momentum scrolling on iOS */
        height: auto !important; /* Let content define height */
        min-height: 0 !important; /* Allow it to shrink */
        flex-grow: 0 !important; /* Don't grow in flex context */
        flex-shrink: 0 !important; /* Don't shrink in flex context */
    }

    .dashboard-table[b-boac2mctiy] {
        /* Ensure table doesn't try to shrink columns too much, let wrapper scroll */
        min-width: 600px; /* Or a suitable min-width to prevent excessive squashing */
    }

        .dashboard-table th[b-boac2mctiy],
        .dashboard-table td[b-boac2mctiy] {
            padding: calc(0.75 * var(--dashboard-spacing-unit)); /* Slightly less padding on mobile */
            font-size: 13px; /* Smaller font on mobile */
            white-space: nowrap; /* Prevent text wrapping in cells, rely on horizontal scroll */
        }

        .dashboard-table th[b-boac2mctiy] {
            /* Sticky header might be problematic with horizontal scroll on mobile,
           but if it works with current setup, keep it. Otherwise, consider removing stickiness for mobile. */
        }

    /* Modal styles are already responsive via their own @media query */
}
/* /Pages/Education.razor.rz.scp.css */


/* Page root styling - Mobile first approach */
div.page-root.lv-theme[b-v7mmdnzn1f] {
    font-family: var(--lv-font-main);
    color: var(--lv-text-primary);
    font-size: 12px; /* Smaller base font for mobile */
    border-radius: 10px;
    line-height: 1.4;
    background-color: #575e6500 !important;
    background-image: none !important;
    position: relative;
    padding: 0px 10px 20px 10px; /* Much smaller padding for mobile */
    right: 0;
    z-index: 2 !important;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100vh;
    height: auto;
}

/* Desktop padding - only apply on larger screens */
@media (min-width: 768px) {
    div.page-root.lv-theme[b-v7mmdnzn1f] {
        font-size: var(--lv-font-size-base);
        padding: 0px 50px 50px 50px;
        border-radius: 20px;
        line-height: var(--lv-line-height-base);
    }
}

.controls-right[b-v7mmdnzn1f] {
    flex-shrink: 1; /* Allow to shrink on mobile */
    min-width: 0; /* Allow to shrink below content size */
}

.controls-right .lv-view-button[b-v7mmdnzn1f] {
    padding: 6px 8px; /* Match other button sizes on mobile */
    font-size: 9px;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .controls-right[b-v7mmdnzn1f] {
        flex-shrink: 0;
    }

    .controls-right .lv-view-button[b-v7mmdnzn1f] {
        padding: 8px 16px;
        font-size: 0.65rem;
    }
}

/* Add styles from previous component if they were general, or keep specific here */
.lv-checkbox-label.disabled[b-v7mmdnzn1f] {
    color: var(--lv-text-disabled);
    cursor: not-allowed;
}

/* Hero Section - Mobile optimized */
.hero[b-v7mmdnzn1f] {
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border-bottom: 1px solid var(--lv-border-primary);
    text-align: center;
    flex-shrink: 0;
    border-radius: 8px 8px 0px 0px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 15px 10px; /* Smaller padding for mobile */
}

.hero-title[b-v7mmdnzn1f] {
    font-family: var(--lv-font-heading);
    color: var(--lv-text-primary);
    margin: 0 0 10px 0; /* Smaller margin */
    font-weight: 700;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* Smaller gap */
    font-size: 1.2rem; /* Smaller title for mobile */
}

.hero-icon[b-v7mmdnzn1f] {
    font-size: 1.5rem; /* Much smaller icon */
    color: var(--lv-background-accent);
}

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

.hero-subtitle[b-v7mmdnzn1f] {
    color: var(--lv-text-secondary);
    margin: 0;
    font-size: 0.9rem; /* Smaller subtitle */
    line-height: 1.3;
}

/* Desktop hero styles */
@media (min-width: 768px) {
    .hero[b-v7mmdnzn1f] {
        padding: 20px;
        border-radius: 10px 10px 0px 0px;
    }

    .hero-title[b-v7mmdnzn1f] {
        font-size: 2rem;
        gap: 1rem;
        margin: 0 0 calc(var(--lv-spacing-unit) * 1.5) 0;
    }

    .hero-icon[b-v7mmdnzn1f] {
        font-size: 2.5rem;
    }

    .hero-subtitle[b-v7mmdnzn1f] {
        font-size: 1.125rem;
        line-height: var(--lv-line-height-base);
    }
}

/* Controls Bar - Mobile optimized */
.controls-bar[b-v7mmdnzn1f] {
    padding: 10px; /* Much smaller padding for mobile */
    background: linear-gradient(135deg, #ffffff, #f9fafb);
    border-bottom: 1px solid var(--lv-border-primary);
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px; /* Smaller gap for mobile */
    width: 100%;
    margin: 0;
    max-width: none; /* Remove width limit */
}

    .controls-bar .lv-view-button[b-v7mmdnzn1f] {
        flex: 0 0 auto; /* override .lv-view-button { flex:1; } */
        min-width: auto;
        max-width: none;
    }

    /* Optional: ensure the Reset button hugs the right edge */
    .controls-bar .reset-filters-btn[b-v7mmdnzn1f] {
        margin-left: auto;
    }

/* Desktop controls bar */
@media (min-width: 768px) {
    .controls-bar[b-v7mmdnzn1f] {
        padding: calc(var(--lv-spacing-unit) * 2) calc(var(--lv-spacing-unit) * 3);
        justify-content: space-between;
        max-width: none; /* Full width on desktop */
        margin: 0; /* No centering on desktop */
    }
}

/* View Buttons Container - Mobile optimized */
.view-buttons-container[b-v7mmdnzn1f] {
    align-items: center;
    gap: 4px; /* Smaller gap */
    justify-content: flex-start;
    width: auto;
    flex: 1; /* Allow to shrink */
    min-width: 0; /* Allow to shrink below content size */
}



.lv-view-button[b-v7mmdnzn1f] {
    background: linear-gradient(145deg, #ffffff, #f3f4f6);
    color: var(--lv-text-secondary);
    border: 2px solid transparent;
    padding: 6px 8px; /* Even smaller padding on mobile */
    border-radius: 10px;
    cursor: pointer;
    font-size: 9px; /* Smaller font on mobile */
    font-weight: 700;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    flex: 0 1 auto; /* Allow shrinking */
    min-width: 0; /* Remove min-width on mobile */
    max-width: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

    .lv-view-button[b-v7mmdnzn1f]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s ease;
    }

    .lv-view-button:hover[b-v7mmdnzn1f]::before {
        left: 100%;
    }

    .lv-view-button:hover[b-v7mmdnzn1f] {
        background: linear-gradient(145deg, #f9fafb, #f1f5f9);
        border-color: var(--lv-background-accent);
        color: var(--lv-background-accent);
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

    .lv-view-button.active[b-v7mmdnzn1f] {
        background: linear-gradient(145deg, #000000, #333333);
        color: white;
        border-color: transparent;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    .lv-view-button.active:hover[b-v7mmdnzn1f] {
        background: linear-gradient(145deg, #333333, #000000);
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

    .lv-view-button.disabled[b-v7mmdnzn1f] {
        opacity: 0.5;
        cursor: not-allowed;
        background: rgba(255, 255, 255, 0.05);
    }

        .lv-view-button.disabled:hover[b-v7mmdnzn1f] {
            transform: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }

.coming-soon[b-v7mmdnzn1f] {
    font-size: 0.55rem; /* Even smaller on mobile */
    opacity: 0.8;
    margin-left: 0.15rem;
    text-transform: lowercase;
    font-weight: 400;
}

/* Desktop button styles */
@media (min-width: 768px) {
    .view-buttons-container[b-v7mmdnzn1f] {
        gap: 8px;
        flex: 0 0 auto;
    }

    .lv-view-button[b-v7mmdnzn1f] {
        padding: 8px 16px;
        font-size: 0.65rem;
        flex: 1;
        min-width: 100px;
        max-width: 200px;
    }

    .coming-soon[b-v7mmdnzn1f] {
        font-size: 0.7rem;
        margin-left: 0.5rem;
    }
}

/* Export Container */
.export-container[b-v7mmdnzn1f] {
    display: flex;
    align-items: center;
    gap: var(--lv-spacing-unit);
}

.export-btn[b-v7mmdnzn1f] {
    background: linear-gradient(145deg, #000000, #333333);
    color: white;
    border: 2px solid transparent;
    padding: calc(var(--lv-spacing-unit) * 0.5) calc(var(--lv-spacing-unit) * 1.5);
    border-radius: 10px;
    cursor: pointer;
    font-size: var(--lv-font-size-small);
    font-weight: 700;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

    .export-btn[b-v7mmdnzn1f]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s ease;
    }

    .export-btn:hover[b-v7mmdnzn1f]::before {
        left: 100%;
    }

    .export-btn:hover[b-v7mmdnzn1f] {
        background: linear-gradient(145deg, #333333, #000000);
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

    .export-btn:active[b-v7mmdnzn1f] {
        transform: translateY(0) scale(1);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

.export-icon[b-v7mmdnzn1f] {
    font-size: 1rem;
}

/* Content Layout */
.content[b-v7mmdnzn1f] {
    padding-top: 0;
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    width: 100%;
    border-radius: 0px 0px 10px 10px;
    background: linear-gradient(135deg, #ffffff, #f8fafc);
}

/* Content Layout for Horizontal Filters */
.content[b-v7mmdnzn1f] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Enhanced Filter Dropdown Styles */
.filter-dropdown[b-v7mmdnzn1f] {
    position: relative;
    width: 100%;
    z-index: 100;
    margin-bottom: 12px;
}

    .filter-dropdown.open[b-v7mmdnzn1f] {
        z-index: 5000;
    }

        .filter-dropdown.open .filter-dropdown-menu[b-v7mmdnzn1f] {
            z-index: 5001;
        }

.filter-dropdown-header[b-v7mmdnzn1f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--lv-spacing-unit) * 1.5) calc(var(--lv-spacing-unit) * 2);
    border: 1px solid var(--lv-border-primary);
    border-radius: var(--lv-border-radius);
    background: linear-gradient(145deg, #ffffff, #f9fafb);
    font-size: var(--lv-font-size-base);
    font-weight: 500;
    color: var(--lv-text-primary);
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    position: relative;
    overflow: hidden;
    width: 100%;
    min-width: 180px;
}

    .filter-dropdown-header[b-v7mmdnzn1f]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent);
        transition: left 0.5s ease;
    }

    .filter-dropdown-header:hover[b-v7mmdnzn1f]::before {
        left: 100%;
    }

    .filter-dropdown-header:hover[b-v7mmdnzn1f] {
        border-color: var(--lv-background-accent);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        background: linear-gradient(145deg, #f9fafb, #f1f5f9);
    }

.filter-dropdown-arrow[b-v7mmdnzn1f] {
    font-size: 12px;
    color: rgba(99, 102, 241, 0.7);
    transition: transform 0.3s ease, color 0.3s ease;
}

    .filter-dropdown-arrow.rotated[b-v7mmdnzn1f] {
        transform: rotate(180deg);
        color: rgba(139, 92, 246, 0.9);
    }

.filter-dropdown-menu[b-v7mmdnzn1f] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid var(--lv-background-accent);
    border-top: none;
    border-radius: 0 0 var(--lv-border-radius) var(--lv-border-radius);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    animation: dropdownSlide-b-v7mmdnzn1f 0.2s ease-out;
    margin-top: -1px;
}

/* Custom Checkbox Styles */
.custom-checkbox[b-v7mmdnzn1f] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    outline: none;
    flex-shrink: 0;
    background: linear-gradient(145deg, #ffffff, #f9fafb);
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    z-index: 10001;
}

    .custom-checkbox:hover[b-v7mmdnzn1f] {
        border-color: var(--lv-background-accent);
        transform: scale(1.05);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .custom-checkbox:checked[b-v7mmdnzn1f] {
        background: linear-gradient(145deg, var(--lv-background-accent), #333333);
        border-color: var(--lv-background-accent);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

        .custom-checkbox:checked[b-v7mmdnzn1f]::after {
            content: '';
            position: absolute;
            left: 5px;
            top: 2px;
            width: 4px;
            height: 8px;
            border: solid #ffffff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

.checkbox-label[b-v7mmdnzn1f] {
    font-size: var(--lv-font-size-base);
    color: #e2e8f0;
    cursor: pointer;
    user-select: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

    .checkbox-label:hover[b-v7mmdnzn1f] {
        color: #ffffff;
    }

/* Filter Dropdown Section */
.filter-dropdown-section[b-v7mmdnzn1f] {
    padding: 0.5rem;
    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
    margin-bottom: 0.5rem;
    display: flex;
    gap: 0.5rem;
}

.select-all-btn[b-v7mmdnzn1f], .deselect-all-btn[b-v7mmdnzn1f] {
    padding: 0.25rem 0.5rem;
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: var(--lv-border-radius-small);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    color: #e2e8f0;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
}

    .select-all-btn:hover[b-v7mmdnzn1f], .deselect-all-btn:hover[b-v7mmdnzn1f] {
        background: linear-gradient(145deg, #f9fafb, #f1f5f9);
        color: var(--lv-text-primary);
        border-color: var(--lv-background-accent);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    }

/* Results Area */
.results-area[b-v7mmdnzn1f] {
    flex-grow: 1;
    padding: calc(var(--lv-spacing-unit) * 3);
    background-color: var(--lv-background-secondary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Alert Message */
.alert-message[b-v7mmdnzn1f] {
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.05));
    color: #fca5a5;
    text-align: center;
    padding: calc(var(--lv-spacing-unit) * 3);
    border-radius: var(--lv-border-radius);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.1);
    font-weight: 500;
    backdrop-filter: blur(10px);
}

/* Table Styles - Mobile Optimized */
.table-card[b-v7mmdnzn1f] {
    flex: 1;
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border: 1px solid var(--lv-border-primary);
    border-radius: 6px; /* Smaller border radius for mobile */
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease; /* Faster transition */
}

    .table-card:hover[b-v7mmdnzn1f] {
        transform: translateY(-1px); /* Smaller transform for mobile */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

.table-header[b-v7mmdnzn1f] {
    padding: 10px; /* Much smaller padding for mobile */
    background: linear-gradient(135deg, #f9fafb, #ffffff);
    border-bottom: 1px solid var(--lv-border-primary);
    display: flex;
    flex-direction: column; /* Stack vertically on mobile */
    gap: 8px;
    flex-shrink: 0;
}

    .table-header h3[b-v7mmdnzn1f] {
        margin: 0;
        font-size: 1rem; /* Smaller title for mobile */
        font-weight: 700;
        color: var(--lv-text-primary);
        letter-spacing: -0.01em;
    }

.table-stats[b-v7mmdnzn1f] {
    display: flex;
    gap: 0.5rem; /* Smaller gap */
    align-items: center;
    flex-wrap: wrap;
}

.stat-item[b-v7mmdnzn1f] {
    font-size: 10px; /* Much smaller stats for mobile */
    color: #94a3b8;
    font-weight: 500;
}

.table-header-controls[b-v7mmdnzn1f] {
    display: flex;
    flex-direction: column; /* Stack vertically on mobile */
    align-items: stretch;
    gap: 8px;
    margin-top: 0;
}

.table-actions[b-v7mmdnzn1f] {
    padding: 8px 10px; /* Much smaller padding */
    background: linear-gradient(145deg, #f8fafc, #f1f5f9);
    border-bottom: 1px solid var(--lv-border-secondary);
    display: flex;
    justify-content: center; /* Center on mobile */
    align-items: center;
}

.table-wrapper[b-v7mmdnzn1f] {
    flex-grow: 1;
    overflow-x: auto; /* Only horizontal scroll on mobile */
    overflow-y: visible; /* Prevent vertical scroll issues */
    display: block;
    border-radius: 0 0 6px 6px; /* Smaller border radius */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Desktop table styles */
@media (min-width: 768px) {
    .table-card[b-v7mmdnzn1f] {
        border-radius: var(--lv-border-radius);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
    }

        .table-card:hover[b-v7mmdnzn1f] {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.2);
        }

    .table-header[b-v7mmdnzn1f] {
        padding: calc(var(--lv-spacing-unit) * 2);
        flex-direction: row;
        justify-content: space-between;
        gap: 0;
    }

        .table-header h3[b-v7mmdnzn1f] {
            font-size: var(--lv-font-size-large);
        }

    .table-stats[b-v7mmdnzn1f] {
        gap: 1rem;
    }

    .stat-item[b-v7mmdnzn1f] {
        font-size: var(--lv-font-size-small);
    }

    .table-header-controls[b-v7mmdnzn1f] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: calc(var(--lv-spacing-unit) * 2);
        margin-top: calc(var(--lv-spacing-unit) * 1);
    }
}

/* Status Filter Buttons */
.status-filter-buttons[b-v7mmdnzn1f] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.status-filter-btn[b-v7mmdnzn1f] {
    padding: 6px 12px;
    border: 1px solid var(--lv-border-primary);
    border-radius: 6px;
    background: var(--lv-background-primary);
    color: var(--lv-text-primary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.status-filter-btn:hover[b-v7mmdnzn1f] {
    background: var(--lv-hover-background);
    border-color: var(--lv-background-accent);
}

.status-filter-btn.active[b-v7mmdnzn1f] {
    background: var(--lv-background-accent);
    color: var(--lv-text-inverted);
    border-color: var(--lv-background-accent);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
    .status-filter-buttons[b-v7mmdnzn1f] {
        gap: 8px;
    }

    .status-filter-btn[b-v7mmdnzn1f] {
        font-size: 0.875rem;
    }
}

    .table-actions[b-v7mmdnzn1f] {
        padding: calc(var(--lv-spacing-unit) * 1.5) calc(var(--lv-spacing-unit) * 2);
        justify-content: flex-end;
    }

    .table-wrapper[b-v7mmdnzn1f] {
        border-radius: 0 0 var(--lv-border-radius) var(--lv-border-radius);
        overflow: auto;
    }
}

.education-table[b-v7mmdnzn1f] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--lv-font-main);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border-radius: 6px; /* Smaller border radius for mobile */
    overflow: hidden;
    border: 1px solid rgba(99, 102, 241, 0.2);
    min-width: 800px; /* Ensure table doesn't get too cramped */
}

    .education-table th[b-v7mmdnzn1f], .education-table td[b-v7mmdnzn1f] {
        padding: 6px 8px; /* Much smaller padding for mobile */
        border: none;
        font-size: 10px; /* Much smaller font for mobile */
        border-bottom: 1px solid var(--lv-border-secondary);
        text-align: left;
        vertical-align: middle;
        color: var(--lv-text-primary);
        white-space: nowrap; /* Prevent text wrapping */
    }

    .education-table th[b-v7mmdnzn1f] {
        position: relative;
        background: linear-gradient(145deg, var(--lv-background-accent), var(--lv-hover-accent));
        color: var(--lv-text-inverted);
        font-size: 9px; /* Much smaller header font for mobile */
        font-weight: 700;
        letter-spacing: 0.02em; /* Tighter letter spacing */
        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; /* Ensure minimum column width */
    }

/* Desktop table styles */
@media (min-width: 768px) {
    .education-table[b-v7mmdnzn1f] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-radius: var(--lv-border-radius);
        min-width: auto;
    }

        .education-table th[b-v7mmdnzn1f], .education-table td[b-v7mmdnzn1f] {
            padding: calc(var(--lv-spacing-unit) * 1.5) calc(var(--lv-spacing-unit) * 1.2);
            font-size: 13px;
            white-space: normal; /* Allow text wrapping on desktop */
        }

        .education-table th[b-v7mmdnzn1f] {
            font-size: 11px;
            letter-spacing: 0.03em;
            min-width: auto;
        }
}

.education-table tbody tr[b-v7mmdnzn1f] {
    transition: all 0.2s ease;
    background-color: white;
}

    .education-table tbody tr:nth-child(even)[b-v7mmdnzn1f] {
        background-color: rgba(248, 250, 252, 0.6);
    }

    .education-table tbody tr:hover[b-v7mmdnzn1f] {
        background: linear-gradient(145deg, var(--lv-hover-background), #f3f4f6);
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.05); /* Smaller shadow for mobile */
        transform: translateY(-1px);
    }

    .education-table tbody tr:last-child td[b-v7mmdnzn1f] {
        border-bottom: none;
    }

/* Sortable Headers */
.sortable[b-v7mmdnzn1f] {
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

th.sortable[b-v7mmdnzn1f] {
    white-space: nowrap; /* keep header on one line */
}

    th.sortable .sort-indicator[b-v7mmdnzn1f] {
        display: inline-flex; /* keep arrow aligned with text */
        align-items: center;
        margin-left: .25rem; /* small gap */
        vertical-align: middle;
    }

.sort-indicator[b-v7mmdnzn1f] {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.sortable:hover .sort-indicator[b-v7mmdnzn1f] {
    opacity: 1;
}

/* Training Row Styles */
.training-row[b-v7mmdnzn1f] {
    transition: all 0.2s ease;
}

.training-row:hover[b-v7mmdnzn1f] {
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

/* Cell Specific Styles - Mobile Optimized */
.training-name-cell[b-v7mmdnzn1f] {
    min-width: 150px; /* Smaller min width for mobile */
}

.training-info[b-v7mmdnzn1f] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem; /* Smaller gap for mobile */
}

.training-title[b-v7mmdnzn1f] {
    font-weight: 600;
    color: var(--lv-text-primary);
    font-size: 0.7rem; /* Much smaller font for mobile */
    line-height: 1.2;
}

.article-cell[b-v7mmdnzn1f] {
    min-width: 80px; /* Smaller min width for mobile */
}

.article-number[b-v7mmdnzn1f] {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    background: rgba(102, 126, 234, 0.1);
    padding: 0.15rem 0.3rem; /* Smaller padding for mobile */
    border-radius: 3px; /* Smaller border radius */
    font-size: 0.6rem; /* Much smaller font for mobile */
    color: var(--lv-background-accent);
    border: 1px solid rgba(102, 126, 234, 0.2);
    line-height: 1.2;
}

/* Desktop cell styles */
@media (min-width: 768px) {
    .training-name-cell[b-v7mmdnzn1f] {
        min-width: 200px;
    }
    
    .training-info[b-v7mmdnzn1f] {
        gap: 0.25rem;
    }
    
    .training-title[b-v7mmdnzn1f] {
        font-size: 0.9rem;
    }
    
    .article-cell[b-v7mmdnzn1f] {
        min-width: 120px;
    }
    
    .article-number[b-v7mmdnzn1f] {
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.8rem;
    }
}

.location-cell[b-v7mmdnzn1f] {
    min-width: 150px;
}

.location-info[b-v7mmdnzn1f] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.location-city[b-v7mmdnzn1f] {
    font-weight: 600;
    color: var(--lv-text-primary);
}

.location-country[b-v7mmdnzn1f] {
    font-size: 0.75rem;
    color: var(--lv-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.time-cell[b-v7mmdnzn1f] {
    min-width: 140px;
}

.time-info[b-v7mmdnzn1f] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.time-date[b-v7mmdnzn1f] {
    font-weight: 600;
    color: var(--lv-text-primary);
}

.time-duration[b-v7mmdnzn1f] {
    font-size: 0.75rem;
    color: var(--lv-text-secondary);
}

.capacity-cell[b-v7mmdnzn1f] {
    min-width: 120px;
    text-align: center;
}

.capacity-info[b-v7mmdnzn1f] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

.capacity-number[b-v7mmdnzn1f] {
    font-weight: 600;
    color: var(--lv-text-primary);
    font-size: 1rem;
}

.capacity-bar[b-v7mmdnzn1f] {
    width: 100%;
    height: 4px;
    background: rgba(99, 102, 241, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

.capacity-fill[b-v7mmdnzn1f] {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.capacity-pending[b-v7mmdnzn1f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 4px;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.pending-text[b-v7mmdnzn1f] {
    color: #f59e0b;
    font-weight: 600;
}

.pending-icon[b-v7mmdnzn1f] {
    color: #f59e0b;
    font-size: 0.8rem;
}

.participant-cell[b-v7mmdnzn1f] {
    min-width: 180px;
}

.participant-info[b-v7mmdnzn1f] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.participant-name[b-v7mmdnzn1f] {
    font-weight: 600;
    color: var(--lv-text-primary);
}

.participant-company[b-v7mmdnzn1f] {
    font-size: 0.75rem;
    color: var(--lv-text-secondary);
}

.price-cell[b-v7mmdnzn1f] {
    min-width: 100px;
    text-align: right;
}

.price-amount[b-v7mmdnzn1f] {
    font-weight: 600;
    color: #10b981;
    font-size: 0.9rem;
}

.price-missing[b-v7mmdnzn1f] {
    color: #94a3b8;
    font-style: italic;
}



/* Filter Controls - Mobile First Design */
.filter-controls[b-v7mmdnzn1f] {
    display: flex;
    flex-direction: column; /* Stack vertically on mobile */
    gap: 8px; /* Smaller gap */
    padding: 10px; /* Much smaller padding */
    border-radius: 6px; /* Smaller border radius */
    margin-bottom: 15px; /* Smaller margin */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    background: linear-gradient(145deg, #ffffff, #f9fafb);
    border: 1px solid var(--lv-border-primary);
}

.filter-group[b-v7mmdnzn1f] {
    display: block;
    position: relative;
    width: 100%;
    margin-bottom: 8px;
}

    .filter-group h6[b-v7mmdnzn1f] {
        display: none;
    }

.filter-dropdown[b-v7mmdnzn1f] {
    position: relative;
    width: 100%;
    z-index: 100;
    margin-bottom: 0;
}

    .filter-dropdown.open[b-v7mmdnzn1f] {
        z-index: 5000;
    }

        .filter-dropdown.open .filter-dropdown-menu[b-v7mmdnzn1f] {
            z-index: 5001;
        }

.filter-dropdown-header[b-v7mmdnzn1f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px; /* Much smaller padding */
    border: 1px solid var(--lv-border-primary);
    border-radius: 6px; /* Smaller border radius */
    background: linear-gradient(145deg, #ffffff, #f9fafb);
    font-size: 11px; /* Much smaller font */
    font-weight: 500;
    color: var(--lv-text-primary);
    cursor: pointer;
    transition: all 0.2s ease; /* Faster transition */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 36px; /* Consistent height */
}

    .filter-dropdown-header:hover[b-v7mmdnzn1f] {
        border-color: var(--lv-background-accent);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
        background: linear-gradient(145deg, #f9fafb, #f1f5f9);
    }

.filter-dropdown-arrow[b-v7mmdnzn1f] {
    font-size: 10px; /* Smaller arrow */
    color: var(--lv-background-accent);
    transition: transform 0.2s ease, color 0.2s ease;
    margin-left: 8px;
}

    .filter-dropdown-arrow.rotated[b-v7mmdnzn1f] {
        transform: rotate(180deg);
        color: var(--lv-hover-accent);
    }

.filter-dropdown-menu[b-v7mmdnzn1f] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid var(--lv-background-accent);
    border-top: none;
    border-radius: 0 0 6px 6px; /* Smaller border radius */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    max-height: 200px; /* Smaller max height for mobile */
    overflow-y: auto;
    animation: dropdownSlide-b-v7mmdnzn1f 0.2s ease-out;
    margin-top: -1px;
    width: 100%;
}

/* Desktop filter styles */
@media (min-width: 768px) {
    .filter-controls[b-v7mmdnzn1f] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: calc(var(--lv-spacing-unit) * 2);
        padding: calc(var(--lv-spacing-unit) * 2);
        border-radius: var(--lv-border-radius);
        margin-bottom: calc(var(--lv-spacing-unit) * 3);
    }

    .filter-group[b-v7mmdnzn1f] {
        display: inline-block;
        min-width: 220px;
        max-width: 280px;
        flex: 1;
        margin-bottom: 0;
    }

    .filter-dropdown-header[b-v7mmdnzn1f] {
        padding: calc(var(--lv-spacing-unit) * 1.5) calc(var(--lv-spacing-unit) * 2);
        border-radius: var(--lv-border-radius);
        font-size: var(--lv-font-size-base);
        min-height: auto;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .filter-dropdown-arrow[b-v7mmdnzn1f] {
        font-size: 12px;
        margin-left: var(--lv-spacing-unit);
    }

    .filter-dropdown-menu[b-v7mmdnzn1f] {
        border-radius: 0 0 var(--lv-border-radius) var(--lv-border-radius);
        max-height: 250px;
        min-width: 220px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
    }
}

@keyframes dropdownSlide-b-v7mmdnzn1f {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

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

.filter-dropdown-item[b-v7mmdnzn1f] {
    display: flex;
    align-items: center;
    gap: 8px; /* Smaller gap */
    padding: 8px 12px; /* Much smaller padding */
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 10px; /* Much smaller font */
    border-bottom: 1px solid var(--lv-border-secondary);
    position: relative;
    overflow: hidden;
    width: 100%;
    background: #ffffff;
    min-height: 32px; /* Consistent height */
}

    .filter-dropdown-item:last-child[b-v7mmdnzn1f] {
        border-bottom: none;
        border-radius: 0 0 6px 6px; /* Smaller border radius */
    }

    .filter-dropdown-item:hover[b-v7mmdnzn1f] {
        background: linear-gradient(145deg, #f9fafb, #f3f4f6);
        box-shadow: inset 2px 0 0 var(--lv-background-accent);
    }

.filter-dropdown-section[b-v7mmdnzn1f] {
    padding: 8px 12px; /* Much smaller padding */
    border-bottom: 1px solid var(--lv-border-secondary);
    background: linear-gradient(145deg, #f9fafb, #f3f4f6);
    display: flex;
    gap: 8px; /* Smaller gap */
    justify-content: center;
}

.select-all-btn[b-v7mmdnzn1f], .deselect-all-btn[b-v7mmdnzn1f] {
    padding: 6px 12px; /* Much smaller padding */
    border: 1px solid var(--lv-border-primary);
    border-radius: 4px; /* Smaller border radius */
    background: linear-gradient(145deg, #ffffff, #f9fafb);
    color: var(--lv-text-primary);
    font-size: 10px; /* Much smaller font */
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    flex: 1; /* Equal width buttons */
}

    .select-all-btn:hover[b-v7mmdnzn1f], .deselect-all-btn:hover[b-v7mmdnzn1f] {
        background: linear-gradient(145deg, #f9fafb, #f1f5f9);
        border-color: var(--lv-background-accent);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    }

/* Desktop filter item styles */
@media (min-width: 768px) {
    .filter-dropdown-item[b-v7mmdnzn1f] {
        gap: calc(var(--lv-spacing-unit) * 1.5);
        padding: calc(var(--lv-spacing-unit) * 1.5) calc(var(--lv-spacing-unit) * 2);
        font-size: 11.6px;
        min-height: auto;
    }

    .filter-dropdown-section[b-v7mmdnzn1f] {
        padding: calc(var(--lv-spacing-unit) * 1.5) calc(var(--lv-spacing-unit) * 2);
        gap: calc(var(--lv-spacing-unit) * 1.5);
    }

    .select-all-btn[b-v7mmdnzn1f], .deselect-all-btn[b-v7mmdnzn1f] {
        padding: calc(var(--lv-spacing-unit) * 0.5) calc(var(--lv-spacing-unit) * 1.5);
        font-size: var(--lv-font-size-small);
        flex: none;
    }
}

.custom-checkbox[b-v7mmdnzn1f] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px; /* Smaller checkbox for mobile */
    height: 14px;
    border: 1px solid #d1d5db;
    border-radius: 3px; /* Smaller border radius */
    cursor: pointer;
    position: relative;
    outline: none;
    flex-shrink: 0;
    background: linear-gradient(145deg, #ffffff, #f9fafb);
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    z-index: 10001;
}

    .custom-checkbox:hover[b-v7mmdnzn1f] {
        border-color: var(--lv-background-accent);
        transform: scale(1.05);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    }

    .custom-checkbox:checked[b-v7mmdnzn1f] {
        background: linear-gradient(145deg, var(--lv-background-accent), #333333);
        border-color: var(--lv-background-accent);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

        .custom-checkbox:checked[b-v7mmdnzn1f]::after {
            content: '';
            position: absolute;
            left: 4px; /* Adjusted for smaller checkbox */
            top: 1px;
            width: 3px; /* Smaller checkmark */
            height: 6px;
            border: solid var(--lv-text-inverted);
            border-width: 0 1.5px 1.5px 0;
            transform: rotate(45deg);
        }

.checkbox-label[b-v7mmdnzn1f] {
    font-size: 10px; /* Much smaller label for mobile */
    color: var(--lv-text-primary);
    cursor: pointer;
    user-select: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

    .checkbox-label:hover[b-v7mmdnzn1f] {
        color: var(--lv-background-accent);
    }

/* Desktop checkbox styles */
@media (min-width: 768px) {
    .custom-checkbox[b-v7mmdnzn1f] {
        width: 18px;
        height: 18px;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

        .custom-checkbox:checked[b-v7mmdnzn1f]::after {
            left: 5px;
            top: 2px;
            width: 4px;
            height: 8px;
            border-width: 0 2px 2px 0;
        }

    .checkbox-label[b-v7mmdnzn1f] {
        font-size: var(--lv-font-size-base);
    }
}

.dropdown-overlay[b-v7mmdnzn1f] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    z-index: 4999;
}

/* Additional mobile optimizations */
@media (max-width: 767px) {
    .content[b-v7mmdnzn1f] {
        overflow: visible !important;
        flex-grow: 1;
    }

    .results-area[b-v7mmdnzn1f] {
        padding: 0px !important;
    }

    .table-wrapper[b-v7mmdnzn1f] {
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        max-height: 70vh !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 15px !important;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) !important;
        border-radius: 6px !important;
    }

    .education-table[b-v7mmdnzn1f] {
        min-width: 800px !important;
        width: auto !important;
        table-layout: fixed !important;
    }

    .education-table th[b-v7mmdnzn1f] {
        white-space: nowrap !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 20 !important;
        font-size: 9px !important;
        padding: 6px 8px !important;
    }

    .education-table td[b-v7mmdnzn1f] {
        font-size: 10px !important;
        white-space: nowrap !important;
        padding: 6px 8px !important;
    }

    /* Modal positioning fixes for mobile */
    .education-modal-overlay[b-v7mmdnzn1f] {
        padding-top: 60px !important; /* Ensure modal appears under navbar */
    }

    .education-modal-container[b-v7mmdnzn1f] {
        max-height: calc(100vh - 80px) !important; /* Account for navbar */
    }

    /* Ensure table content scrolls but footer stays fixed */
    .education-customer-table-wrapper[b-v7mmdnzn1f] {
        max-height: calc(100vh - 250px) !important; /* Leave space for header and footer */
    }
    .hero-title[b-v7mmdnzn1f][b-v7mmdnzn1f] {
        font-family: var(--lv-font-heading);
        color: var(--lv-text-primary);
        margin: 0 0 10px 0;
        font-weight: 700;
        letter-spacing: -0.01em; 
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        font-size: 1.2rem !important;
    }
}
/* Animations */
@keyframes heroGlow-b-v7mmdnzn1f {
    0% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    100% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

@keyframes iconFloat-b-v7mmdnzn1f {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes iconGlow-b-v7mmdnzn1f {
    0% {
        filter: drop-shadow(0 2px 8px rgba(96, 165, 250, 0.4));
    }

    100% {
        filter: drop-shadow(0 4px 16px rgba(96, 165, 250, 0.8));
    }
}

@keyframes dropdownSlide-b-v7mmdnzn1f {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

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

@keyframes spin-b-v7mmdnzn1f {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Scrollbar Styling */
.filter-dropdown-menu[b-v7mmdnzn1f]::-webkit-scrollbar {
    width: 4px;
}

.filter-dropdown-menu[b-v7mmdnzn1f]::-webkit-scrollbar-track {
    background: rgba(99, 102, 241, 0.1);
    border-radius: 2px;
}

.filter-dropdown-menu[b-v7mmdnzn1f]::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.5);
    border-radius: 2px;
}

    .filter-dropdown-menu[b-v7mmdnzn1f]::-webkit-scrollbar-thumb:hover {
        background: rgba(99, 102, 241, 0.8);
    }

.table-wrapper[b-v7mmdnzn1f]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.table-wrapper[b-v7mmdnzn1f]::-webkit-scrollbar-track {
    background: rgba(99, 102, 241, 0.1);
    border-radius: 3px;
}

.table-wrapper[b-v7mmdnzn1f]::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.5);
    border-radius: 3px;
    transition: background 0.3s ease;
}

    .table-wrapper[b-v7mmdnzn1f]::-webkit-scrollbar-thumb:hover {
        background: rgba(99, 102, 241, 0.8);
    }

/* Modal Styles - Mobile First */
.education-modal-overlay[b-v7mmdnzn1f] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 10000;
    /* Removed backdrop-filter: blur(4px); - EXPENSIVE on mobile */
    padding-top: 70px; /* Account for navbar height on mobile */
    box-sizing: border-box;
    will-change: opacity; /* Optimize for animation */
}

/* Prevent body scroll when modal is open */
body.modal-open[b-v7mmdnzn1f] {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}

.education-modal-container[b-v7mmdnzn1f] {
    background: #ffffff;
    border-radius: 8px; /* Smaller border radius for mobile */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-width: 100%; /* Full width on mobile */
    max-height: calc(100vh - 90px); /* Account for navbar + padding */
    width: 100%;
    display: flex;
    flex-direction: column;
    animation: education-modal-slide-in-b-v7mmdnzn1f 0.2s ease-out; /* Faster animation */
    margin-top: 0; /* No margin on mobile */
    overflow: hidden; /* Prevent modal from overflowing */
    will-change: transform, opacity; /* Optimize for animation */
    transform: translateZ(0); /* Force GPU acceleration */
}

/* Desktop modal styles */
@media (min-width: 768px) {
    .education-modal-overlay[b-v7mmdnzn1f] {
        padding: calc(var(--lv-spacing-unit) * 8) calc(var(--lv-spacing-unit) * 3);
    }

    .education-modal-container[b-v7mmdnzn1f] {
        border-radius: var(--lv-border-radius);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        max-width: 800px;
        max-height: calc(100vh - calc(var(--lv-spacing-unit) * 16));
        margin-top: calc(var(--lv-spacing-unit) * 4);
    }
}

@keyframes education-modal-slide-in-b-v7mmdnzn1f {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

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

@keyframes modalHeaderSlide-b-v7mmdnzn1f {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.education-modal-title[b-v7mmdnzn1f] {
    display: flex;
    align-items: center;
    gap: calc(var(--lv-spacing-unit) * 1);
    font-size: var(--lv-font-size-large);
    font-weight: 700;
    color: var(--lv-text-primary);
    margin: 0;
}

.education-modal-icon[b-v7mmdnzn1f] {
    font-size: 1.5rem;
}

.education-modal-close[b-v7mmdnzn1f] {
    background: linear-gradient(145deg, #f8fafc, #f1f5f9);
    border: 1px solid var(--lv-border-secondary);
    font-size: 1.5rem;
    color: var(--lv-text-secondary);
    cursor: pointer;
    padding: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    animation: closeButtonAppear-b-v7mmdnzn1f 0.4s ease-out 0.2s both;
}

@keyframes closeButtonAppear-b-v7mmdnzn1f {
    0% {
        opacity: 0;
        transform: scale(0.8) rotate(-90deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.1) rotate(0deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.education-modal-close:hover[b-v7mmdnzn1f] {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-color: var(--lv-border-primary);
    color: var(--lv-text-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.education-modal-close:active[b-v7mmdnzn1f] {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.education-modal-close:focus[b-v7mmdnzn1f] {
    outline: 2px solid var(--lv-background-accent);
    outline-offset: 2px;
}

.education-modal-close-icon[b-v7mmdnzn1f] {
    transition: all 0.2s ease;
    opacity: 0.7;
}

.education-modal-close:hover .education-modal-close-icon[b-v7mmdnzn1f] {
    opacity: 1;
    transform: scale(1.1) rotate(90deg);
}

.education-modal-content[b-v7mmdnzn1f] {
    padding: calc(var(--lv-spacing-unit) * 2);
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0; /* Allow flex item to shrink below its content size */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile */
    contain: layout style paint; /* CSS containment for better performance */
}

.education-training-info[b-v7mmdnzn1f] {
    background: linear-gradient(145deg, #f8fafc, #f1f5f9);
    border-radius: var(--lv-border-radius-small);
    padding: calc(var(--lv-spacing-unit) * 1.5);
    margin-bottom: calc(var(--lv-spacing-unit) * 2);
    border: 1px solid var(--lv-border-secondary);
}

.education-info-row[b-v7mmdnzn1f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(var(--lv-spacing-unit) * 0.5) 0;
}

    .education-info-row:not(:last-child)[b-v7mmdnzn1f] {
        border-bottom: 1px solid var(--lv-border-secondary);
        margin-bottom: calc(var(--lv-spacing-unit) * 0.5);
        padding-bottom: calc(var(--lv-spacing-unit) * 0.75);
    }

.education-info-label[b-v7mmdnzn1f] {
    font-weight: 600;
    color: var(--lv-text-primary);
    font-size: var(--lv-font-size-base);
}

.education-info-value[b-v7mmdnzn1f] {
    color: var(--lv-text-secondary);
    font-size: var(--lv-font-size-base);
}

.education-customers-list[b-v7mmdnzn1f] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--lv-spacing-unit) * 1.5);
}

.education-customer-card[b-v7mmdnzn1f] {
    background: #ffffff;
    border: 1px solid var(--lv-border-secondary);
    border-radius: var(--lv-border-radius-small);
    padding: calc(var(--lv-spacing-unit) * 1.5);
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

    .education-customer-card:hover[b-v7mmdnzn1f] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-1px);
    }

.education-customer-header[b-v7mmdnzn1f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: calc(var(--lv-spacing-unit) * 1);
}

.education-customer-name[b-v7mmdnzn1f] {
    font-size: var(--lv-font-size-large);
    font-weight: 600;
    color: var(--lv-text-primary);
}

.education-customer-status[b-v7mmdnzn1f] {
    display: flex;
    align-items: center;
}

.education-status-badge[b-v7mmdnzn1f] {
    padding: calc(var(--lv-spacing-unit) * 0.25) calc(var(--lv-spacing-unit) * 0.75);
    border-radius: 999px;
    font-size: var(--lv-font-size-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.education-status-confirmed[b-v7mmdnzn1f] {
    background: linear-gradient(145deg, #dcfce7, #bbf7d0);
    color: #166534;
}

.education-status-default[b-v7mmdnzn1f] {
    background: linear-gradient(145deg, #f3f4f6, #e5e7eb);
    color: #374151;
}

.education-customer-details[b-v7mmdnzn1f] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--lv-spacing-unit) * 0.5);
}

.education-detail-row[b-v7mmdnzn1f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.education-detail-label[b-v7mmdnzn1f] {
    font-weight: 500;
    color: var(--lv-text-secondary);
    font-size: var(--lv-font-size-small);
}

.education-detail-value[b-v7mmdnzn1f] {
    color: var(--lv-text-primary);
    font-size: var(--lv-font-size-small);
    font-weight: 500;
}

/* Clickable participant styles */
.participant-name.clickable[b-v7mmdnzn1f] {
    color: #2563eb;
    transition: color 0.2s ease;
}

    .participant-name.clickable:hover[b-v7mmdnzn1f] {
        color: #1d4ed8;
        text-decoration: underline;
    }

.education-modal-content[b-v7mmdnzn1f] {
    background: #ffffff;
    border-radius: var(--lv-border-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 1200px;
    max-height: calc(100vh - calc(var(--lv-spacing-unit) * 16));
    width: 100%;
    display: flex;
    flex-direction: column;
    animation: education-modal-slide-in-b-v7mmdnzn1f 0.3s ease-out;
    margin-top: calc(var(--lv-spacing-unit) * 3);
}

@keyframes education-modal-slide-in-b-v7mmdnzn1f {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

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

.education-modal-header[b-v7mmdnzn1f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px; /* Much smaller padding for mobile */
    background: linear-gradient(145deg, #f8fafc, #f1f5f9);
    border-bottom: 1px solid var(--lv-border-secondary);
    flex-shrink: 0;
    animation: education-modal-header-slide-b-v7mmdnzn1f 0.3s ease-out;
}

@keyframes education-modal-header-slide-b-v7mmdnzn1f {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.education-modal-header h3[b-v7mmdnzn1f] {
    display: flex;
    align-items: center;
    gap: 8px; /* Smaller gap for mobile */
    font-size: 0.8rem; /* Much smaller title for mobile */
    font-weight: 700;
    color: var(--lv-text-primary);
    margin: 0;
    line-height: 1.2;
}

.education-modal-subtitle[b-v7mmdnzn1f] {
    color: var(--lv-text-secondary);
    margin: 0;
    font-size: 9px; /* Much smaller subtitle for mobile */
    font-weight: 500;
}

/* Desktop modal header styles */
@media (min-width: 768px) {
    .education-modal-header[b-v7mmdnzn1f] {
        padding: calc(var(--lv-spacing-unit) * 2);
    }

        .education-modal-header h3[b-v7mmdnzn1f] {
            gap: calc(var(--lv-spacing-unit) * 1);
            font-size: var(--lv-font-size-large);
        }

    .education-modal-subtitle[b-v7mmdnzn1f] {
        font-size: var(--lv-font-size-base);
    }
}

.education-modal-close[b-v7mmdnzn1f] {
    background: linear-gradient(145deg, #f8fafc, #f1f5f9);
    border: 1px solid var(--lv-border-secondary);
    font-size: 1.2rem; /* Smaller close button for mobile */
    color: var(--lv-text-secondary);
    cursor: pointer;
    padding: 0;
    width: 28px; /* Smaller close button for mobile */
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px; /* Smaller border radius */
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    animation: education-close-button-appear-b-v7mmdnzn1f 0.4s ease-out 0.2s both;
}

/* Desktop close button */
@media (min-width: 768px) {
    .education-modal-close[b-v7mmdnzn1f] {
        font-size: 1.5rem;
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }
}

@keyframes education-close-button-appear-b-v7mmdnzn1f {
    0% {
        opacity: 0;
        transform: scale(0.8) rotate(-90deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.1) rotate(0deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.education-modal-close:hover[b-v7mmdnzn1f] {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-color: var(--lv-border-primary);
    color: var(--lv-text-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.education-modal-close:active[b-v7mmdnzn1f] {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.education-modal-close:focus[b-v7mmdnzn1f] {
    outline: 2px solid var(--lv-background-accent);
    outline-offset: 2px;
}

.education-modal-body[b-v7mmdnzn1f] {
    padding: 10px; /* Much smaller padding for mobile */
    flex: 1;
    overflow: hidden; /* Prevent body from scrolling */
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Education Training Info - Mobile Optimized */
.education-training-info[b-v7mmdnzn1f] {
    background: linear-gradient(145deg, #f8fafc, #f1f5f9);
    border-radius: 4px; /* Smaller border radius for mobile */
    padding: 8px; /* Much smaller padding for mobile */
    margin-bottom: 10px; /* Smaller margin for mobile */
    border: 1px solid var(--lv-border-secondary);
}

.education-info-row[b-v7mmdnzn1f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0; /* Much smaller padding for mobile */
}

.education-info-row:not(:last-child)[b-v7mmdnzn1f] {
    border-bottom: 1px solid var(--lv-border-secondary);
    margin-bottom: 4px; /* Smaller margin for mobile */
    padding-bottom: 6px; /* Smaller padding for mobile */
}

.education-info-label[b-v7mmdnzn1f] {
    font-weight: 600;
    color: var(--lv-text-primary);
    font-size: 10px; /* Much smaller font for mobile */
    line-height: 1.2;
}

.education-info-value[b-v7mmdnzn1f] {
    color: var(--lv-text-secondary);
    font-size: 10px; /* Much smaller font for mobile */
    line-height: 1.2;
}

/* Desktop training info styles */
@media (min-width: 768px) {
    .education-training-info[b-v7mmdnzn1f] {
        border-radius: var(--lv-border-radius-small);
        padding: calc(var(--lv-spacing-unit) * 1.5);
        margin-bottom: calc(var(--lv-spacing-unit) * 2);
    }
    
    .education-info-row[b-v7mmdnzn1f] {
        padding: calc(var(--lv-spacing-unit) * 0.5) 0;
    }
    
    .education-info-row:not(:last-child)[b-v7mmdnzn1f] {
        margin-bottom: calc(var(--lv-spacing-unit) * 0.5);
        padding-bottom: calc(var(--lv-spacing-unit) * 0.75);
    }
    
    .education-info-label[b-v7mmdnzn1f] {
        font-size: var(--lv-font-size-base);
    }
    
    .education-info-value[b-v7mmdnzn1f] {
        font-size: var(--lv-font-size-base);
    }
}

/* Education Customer Search */
.education-customer-search[b-v7mmdnzn1f] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--lv-spacing-unit) * 1.5);
    margin-bottom: calc(var(--lv-spacing-unit) * 2);
}

.education-search-container[b-v7mmdnzn1f] {
    position: relative;
    display: flex;
    align-items: center;
}

.education-search-input[b-v7mmdnzn1f] {
    flex: 1;
    padding: calc(var(--lv-spacing-unit) * 1) calc(var(--lv-spacing-unit) * 1.5);
    border: 1px solid var(--lv-border-primary);
    border-radius: var(--lv-border-radius);
    background: linear-gradient(145deg, #ffffff, #f9fafb);
    font-size: var(--lv-font-size-base) !important;
    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);
}

    .education-search-input[b-v7mmdnzn1f]::before {
        content: '';
        position: absolute;
        left: calc(var(--lv-spacing-unit) * 1.2);
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        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;
        pointer-events: none;
    }

    .education-search-input:focus[b-v7mmdnzn1f] {
        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);
    }

    .education-search-input:hover[b-v7mmdnzn1f] {
        border-color: var(--lv-background-accent);
    }

.education-clear-search-btn[b-v7mmdnzn1f] {
    position: absolute;
    right: calc(var(--lv-spacing-unit) * 0.75);
    background: none;
    border: none;
    color: var(--lv-text-secondary);
    cursor: pointer;
    padding: calc(var(--lv-spacing-unit) * 0.5);
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .education-clear-search-btn:hover[b-v7mmdnzn1f] {
        color: var(--lv-text-primary);
        background: rgba(0, 0, 0, 0.05);
    }

.education-search-results-info[b-v7mmdnzn1f] {
    padding: calc(var(--lv-spacing-unit) * 0.75) calc(var(--lv-spacing-unit) * 1);
    background: linear-gradient(145deg, #f0f9ff, #e0f2fe);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--lv-border-radius-small);
    color: #0369a1;
    font-size: var(--lv-font-size-small);
    font-weight: 500;
}

/* Education Customer Table - Mobile Optimized */
.education-customer-table-wrapper[b-v7mmdnzn1f] {
    flex: 1; /* Take remaining space */
    overflow-x: auto; /* Horizontal scroll for wide table */
    overflow-y: auto; /* Vertical scroll for table content */
    display: block;
    border-radius: 6px; /* Smaller border radius for mobile */
    border: 1px solid rgba(99, 102, 241, 0.2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    min-height: 0; /* Allow flex shrinking */
    contain: layout style paint; /* CSS containment for better performance */
    will-change: scroll-position; /* Optimize scrolling */
}

.education-customer-table[b-v7mmdnzn1f] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--lv-font-main);
    font-size: 10px; /* Much smaller font for mobile */
    min-width: 600px; /* Ensure table doesn't get too cramped */
}

    .education-customer-table th[b-v7mmdnzn1f],
    .education-customer-table td[b-v7mmdnzn1f] {
        padding: 6px 8px; /* Much smaller padding for mobile */
        border: none;
        border-bottom: 1px solid var(--lv-border-secondary);
        text-align: left;
        vertical-align: middle;
        color: var(--lv-text-primary);
        white-space: nowrap; /* Prevent text wrapping */
    }

    .education-customer-table th[b-v7mmdnzn1f] {
        position: sticky;
        top: 0;
        background: linear-gradient(145deg, var(--lv-background-accent), var(--lv-hover-accent));
        color: var(--lv-text-inverted);
        font-size: 9px; /* Much smaller header font for mobile */
        font-weight: 700;
        letter-spacing: 0.02em; /* Tighter letter spacing */
        text-transform: uppercase;
        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: 70px; /* Ensure minimum column width */
    }

/* Desktop customer table styles */
@media (min-width: 768px) {
    .education-customer-table-wrapper[b-v7mmdnzn1f] {
        border-radius: var(--lv-border-radius);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        overflow: auto;
    }

    .education-customer-table[b-v7mmdnzn1f] {
        font-size: var(--lv-font-size-base);
        min-width: auto;
    }

        .education-customer-table th[b-v7mmdnzn1f],
        .education-customer-table td[b-v7mmdnzn1f] {
            padding: calc(var(--lv-spacing-unit) * 1.5) calc(var(--lv-spacing-unit) * 1.2);
            white-space: normal;
        }

        .education-customer-table th[b-v7mmdnzn1f] {
            font-size: var(--lv-font-size-small);
            letter-spacing: 0.03em;
            min-width: auto;
        }
}

.education-customer-table tbody tr[b-v7mmdnzn1f] {
    transition: background-color 0.15s ease; /* Only transition background, not all */
    background-color: white;
    contain: layout style; /* Row-level containment */
}

    .education-customer-table tbody tr:nth-child(even)[b-v7mmdnzn1f] {
        background-color: rgba(248, 250, 252, 0.6);
    }

    .education-customer-table tbody tr:hover[b-v7mmdnzn1f] {
        background: linear-gradient(145deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
        /* Removed expensive box-shadow and transform on hover for better performance */
    }

    .education-customer-table tbody tr:last-child td[b-v7mmdnzn1f] {
        border-bottom: none;
    }

.education-customer-row[b-v7mmdnzn1f] {
    transition: all 0.2s ease;
}

    .education-customer-row:hover[b-v7mmdnzn1f] {
        background: linear-gradient(145deg, rgba(59, 130, 246, 0.05), rgba(99, 102, 241, 0.1));
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
    }

.education-market-flag[b-v7mmdnzn1f] {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--lv-spacing-unit) * 0.5);
}

.flag-icon[b-v7mmdnzn1f] {
    width: 20px;
    height: 15px;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Education Modal Footer & Pagination - Mobile Optimized */
.education-modal-footer[b-v7mmdnzn1f] {
    display: flex;
    flex-direction: column; /* Stack vertically on mobile */
    gap: 8px; /* Smaller gap */
    padding: 8px; /* Much smaller padding for mobile */
    background: linear-gradient(145deg, #f8fafc, #f1f5f9);
    border-top: 1px solid var(--lv-border-secondary);
    flex-shrink: 0; /* Prevent footer from shrinking */
    margin-top: 0; /* No margin */
}

.education-pagination-info p[b-v7mmdnzn1f] {
    margin: 0;
    color: var(--lv-text-secondary);
    font-size: 10px; /* Much smaller font for mobile */
    font-weight: 500;
    text-align: center; /* Center on mobile */
}

.education-pagination-controls[b-v7mmdnzn1f] {
    display: flex;
    align-items: center;
    justify-content: center; /* Center on mobile */
    gap: 4px; /* Smaller gap for mobile */
    flex-wrap: wrap; /* Wrap on mobile */
}

.education-pagination-btn[b-v7mmdnzn1f] {
    padding: 4px 6px; /* Much smaller padding for mobile */
    border: 1px solid var(--lv-border-primary);
    border-radius: 3px; /* Smaller border radius */
    background: linear-gradient(145deg, #ffffff, #f9fafb);
    color: var(--lv-text-primary);
    cursor: pointer;
    font-size: 8px; /* Much smaller font for mobile */
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    min-width: 20px; /* Much smaller button size */
    height: 20px;
}

/* Desktop pagination styles */
@media (min-width: 768px) {
    .education-modal-footer[b-v7mmdnzn1f] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: calc(var(--lv-spacing-unit) * 2);
        gap: 0;
        margin-top: calc(var(--lv-spacing-unit) * 2);
    }
    
    .education-pagination-info p[b-v7mmdnzn1f] {
        font-size: var(--lv-font-size-small);
        text-align: left;
    }
    
    .education-pagination-controls[b-v7mmdnzn1f] {
        justify-content: flex-end;
        gap: calc(var(--lv-spacing-unit) * 0.5);
        flex-wrap: nowrap;
    }
    
    .education-pagination-btn[b-v7mmdnzn1f] {
        padding: calc(var(--lv-spacing-unit) * 0.75) calc(var(--lv-spacing-unit) * 1);
        border-radius: var(--lv-border-radius-small);
        font-size: var(--lv-font-size-small);
        min-width: auto;
        height: auto;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
}

.education-pagination-btn:hover:not(.disabled)[b-v7mmdnzn1f] {
    background: linear-gradient(145deg, #f9fafb, #f1f5f9);
    border-color: var(--lv-background-accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.education-pagination-btn:active:not(.disabled)[b-v7mmdnzn1f] {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.education-pagination-btn.disabled[b-v7mmdnzn1f] {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.5);
}

.education-pagination-btn.active[b-v7mmdnzn1f] {
    background: linear-gradient(145deg, var(--lv-background-accent), var(--lv-hover-accent));
    color: var(--lv-text-inverted);
    border-color: var(--lv-background-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.education-page-number[b-v7mmdnzn1f] {
    min-width: 36px;
}


.clickable-row[b-v7mmdnzn1f] {
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: var(--lv-border-radius-small);
    padding: calc(var(--lv-spacing-unit) * 0.5);
    position: relative;
}

    .clickable-row:hover[b-v7mmdnzn1f] {
        background: linear-gradient(145deg, rgba(37, 99, 235, 0.05), rgba(59, 130, 246, 0.1));
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
    }

.booking-summary[b-v7mmdnzn1f] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--lv-spacing-unit) * 0.5);
    margin-bottom: calc(var(--lv-spacing-unit) * 0.25);
}



.clickable-icon[b-v7mmdnzn1f] {
    color: #6b7280;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.clickable-row:hover .clickable-icon[b-v7mmdnzn1f] {
    color: #2563eb;
    transform: scale(1.1);
}

.click-hint[b-v7mmdnzn1f] {
    font-size: 0.7rem;
    color: #9ca3af;
    font-style: italic;
    opacity: 0;
    transition: opacity 0.2s ease;
    text-align: center;
}

.clickable-row:hover .click-hint[b-v7mmdnzn1f] {
    opacity: 1;
}

/* Mobile scrollbar styling for customers list */
.education-customers-list[b-v7mmdnzn1f]::-webkit-scrollbar {
    width: 4px;
}

.education-customers-list[b-v7mmdnzn1f]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 2px;
}

.education-customers-list[b-v7mmdnzn1f]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

    .education-customers-list[b-v7mmdnzn1f]::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.3);
    }

/* Loading State Styles */
.loading-container[b-v7mmdnzn1f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    min-height: 300px;
    text-align: center;
}

    .loading-container p[b-v7mmdnzn1f] {
        color: var(--lv-text-secondary);
        font-size: 1rem;
        margin-top: 1rem;
        margin-bottom: 0;
    }

.loading-spinner[b-v7mmdnzn1f] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--lv-border-secondary);
    border-top: 4px solid var(--lv-background-accent);
    border-radius: 50%;
    animation: spin-b-v7mmdnzn1f 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin-b-v7mmdnzn1f {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.alert-banner[b-v7mmdnzn1f] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem 1rem;
    margin: 0 0 1rem 0;
    border: 1px solid #fdba74;
    background: #fff7ed;
    color: #9a3412;
    border-radius: var(--lv-border-radius);
}

    .alert-banner .close[b-v7mmdnzn1f] {
        margin-left: auto;
        background: none;
        border: 0;
        cursor: pointer;
        font-size: 1.1rem;
        line-height: 1;
        color: inherit;
    }

    .alert-banner svg[b-v7mmdnzn1f] {
        flex: 0 0 auto;
        margin-top: 2px;
    }


.time-cell .dt[b-v7mmdnzn1f] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
    gap: 2px;
}

.time-cell .dt-date[b-v7mmdnzn1f] {
    font-weight: 600;
}

.time-cell .dt-time[b-v7mmdnzn1f] {
    font-size: var(--lv-font-size-small);
    color: var(--lv-text-secondary);
    letter-spacing: .2px;
}

.filter-controls[b-v7mmdnzn1f] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}

.filter-actions[b-v7mmdnzn1f] {
    margin-left: auto;
}

.reset-filters-btn[b-v7mmdnzn1f] {
    padding: 6px 10px;
    border-radius: var(--lv-border-radius-small);
    border: 1px solid var(--lv-border-primary);
    background: var(--lv-background-secondary);
    color: var(--lv-text-primary);
    cursor: pointer;
}

    .reset-filters-btn:hover[b-v7mmdnzn1f] {
        background: var(--lv-hover-background);
    }

.lv-table-link[b-v7mmdnzn1f] {
    text-decoration: underline;
    cursor: pointer;
}

.text-disabled[b-v7mmdnzn1f] {
    color: var(--lv-text-disabled);
}




.link-button[b-v7mmdnzn1f] {
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}

.table-footer[b-v7mmdnzn1f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lv-border-primary, #e5e7eb);
    padding-bottom: 12px;
}

.pagination-info[b-v7mmdnzn1f] {
    flex: 1;
}

    .pagination-info p[b-v7mmdnzn1f] {
        margin: 0;
        font-size: var(--lv-font-size-small, 12px);
        color: var(--lv-text-secondary, #6b7280);
    }

.pagination-controls[b-v7mmdnzn1f] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pagination-btn[b-v7mmdnzn1f] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--lv-border-primary, #e5e7eb);
    border-radius: var(--lv-border-radius, 10px);
    background: var(--lv-background-primary, #ffffff);
    color: var(--lv-text-primary, #374151);
    cursor: pointer;
    font-size: var(--lv-font-size-small, 12px);
    font-weight: 600;
    transition: all 0.2s ease;
}

    .pagination-btn:hover:not(.disabled))[b-v7mmdnzn1f] {
        background: var(--lv-hover-background, #f9fafb);
        border-color: var(--lv-background-accent, #000000);
        color: var(--lv-background-accent, #000000);
    }

    .pagination-btn.active[b-v7mmdnzn1f] {
        background: var(--lv-background-accent, #000000);
        color: var(--lv-text-inverted, #ffffff);
        border-color: var(--lv-background-accent, #000000);
    }

    .pagination-btn.disabled[b-v7mmdnzn1f] {
        opacity: 0.5;
        cursor: not-allowed;
        background: var(--lv-background-secondary, #f8fafc);
        color: var(--lv-text-disabled, #9ca3af);
    }

.page-number[b-v7mmdnzn1f] {
    min-width: 32px;
}

/* Empty State Container */
.empty-state-container[b-v7mmdnzn1f] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.empty-state[b-v7mmdnzn1f] {
    text-align: center;
    color: var(--lv-text-secondary);
}

.empty-state h4[b-v7mmdnzn1f] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--lv-text-primary);
    margin: 0 0 0.5rem 0;
}

.empty-state p[b-v7mmdnzn1f] {
    font-size: 0.9375rem;
    color: var(--lv-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Mobile */
@media (max-width: 646px) {
    .pagination-btn[b-v7mmdnzn1f] {
        width: 28px;
        height: 28px;
        font-size: 11px;
        border-width: 1px;
    }

        .pagination-btn.page-number[b-v7mmdnzn1f] {
            min-width: 28px;
            padding: 0 4px;
        }

    .pagination-controls[b-v7mmdnzn1f] {
        gap: 2px;
    }

    .table-footer[b-v7mmdnzn1f] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .pagination-info[b-v7mmdnzn1f] {
        text-align: center;
        order: 2;
    }

    .pagination-controls[b-v7mmdnzn1f] {
        justify-content: center;
        order: 1;
    }
}



/* /Pages/FirstTimeBuyer.razor.rz.scp.css */
/* Sales search container styling */
.sales-search-container[b-dsflzrtn5p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.search-controls[b-dsflzrtn5p] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-size-selector[b-dsflzrtn5p] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.page-size-dropdown[b-dsflzrtn5p] {
    padding: 4px 8px;
    border: 1px solid var(--lv-border-primary, #e5e7eb);
    border-radius: var(--lv-border-radius, 10px);
    background: var(--lv-background-primary, #ffffff);
    font-size: var(--lv-font-size-small, 12px);
    min-width: 60px;
}

/* Pagination styling - matching CustomerClassification */
.table-footer[b-dsflzrtn5p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lv-border-primary, #e5e7eb);
}

.pagination-info[b-dsflzrtn5p] {
    flex: 1;
}

.pagination-info p[b-dsflzrtn5p] {
    margin: 0;
    font-size: var(--lv-font-size-small, 12px);
    color: var(--lv-text-secondary, #6b7280);
}

.pagination-controls[b-dsflzrtn5p] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pagination-btn[b-dsflzrtn5p] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--lv-border-primary, #e5e7eb);
    border-radius: var(--lv-border-radius, 10px);
    background: var(--lv-background-primary, #ffffff);
    color: var(--lv-text-primary, #374151);
    cursor: pointer;
    font-size: var(--lv-font-size-small, 12px);
    font-weight: 600;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(.disabled)[b-dsflzrtn5p] {
    background: var(--lv-hover-background, #f9fafb);
    border-color: var(--lv-background-accent, #000000);
    color: var(--lv-background-accent, #000000);
}

.pagination-btn.active[b-dsflzrtn5p] {
    background: var(--lv-background-accent, #000000);
    color: var(--lv-text-inverted, #ffffff);
    border-color: var(--lv-background-accent, #000000);
}

.pagination-btn.disabled[b-dsflzrtn5p] {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--lv-background-secondary, #f8fafc);
    color: var(--lv-text-disabled, #9ca3af);
}

.page-number[b-dsflzrtn5p] {
    min-width: 32px;
}

/* Mobile pagination styling */
@media (max-width: 646px) {
    /* Smaller pagination buttons */
    .pagination-btn[b-dsflzrtn5p] {
        width: 28px;
        height: 28px;
        font-size: 11px;
        border-width: 1px;
    }

    .pagination-btn.page-number[b-dsflzrtn5p] {
        min-width: 28px;
        padding: 0 4px;
    }

    .pagination-controls[b-dsflzrtn5p] {
        gap: 2px;
    }

    /* Stack table footer vertically on mobile */
    .table-footer[b-dsflzrtn5p] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .pagination-info[b-dsflzrtn5p] {
        text-align: center;
        order: 2;
    }

    .pagination-controls[b-dsflzrtn5p] {
        justify-content: center;
        order: 1;
    }

    /* Responsive search container */
    .sales-search-container[b-dsflzrtn5p] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .search-controls[b-dsflzrtn5p] {
        justify-content: center;
    }

    .page-size-selector[b-dsflzrtn5p] {
        justify-content: center;
    }
}
/* /Pages/HeadbrandsLive.razor.rz.scp.css */
/* Mobile pagination styling - kept separate for responsive design */
@media (max-width: 646px) {
    /* Smaller pagination buttons */
    .pagination-btn[b-1kkj0pi6lc] {
        width: 28px;
        height: 28px;
        font-size: 11px;
        border-width: 1px;
    }

    .pagination-btn.page-number[b-1kkj0pi6lc] {
        min-width: 28px;
        padding: 0 4px;
    }

    .pagination-controls[b-1kkj0pi6lc] {
        gap: 2px;
    }

    /* Stack table footer vertically on mobile */
    .table-footer[b-1kkj0pi6lc] {
        display:none;
    }

    .pagination-info[b-1kkj0pi6lc] {
        text-align: center;
        order: 2;
    }

    .pagination-controls[b-1kkj0pi6lc] {
        justify-content: center;
        order: 1;
    }
}

/* Black Week toggle loading states */
.black-week-toggle.loading[b-1kkj0pi6lc] {
    opacity: 0.7;
    cursor: wait;
    pointer-events: none;
}

.black-week-toggle.loading:disabled[b-1kkj0pi6lc] {
    opacity: 0.7;
}

/* Button spinner animation */
.button-spinner[b-1kkj0pi6lc] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: button-spin-b-1kkj0pi6lc 0.6s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes button-spin-b-1kkj0pi6lc {
    to {
        transform: rotate(360deg);
    }
}

.black-week-toggle:not(.active) .button-spinner[b-1kkj0pi6lc] {
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: currentColor;
}
/* /Pages/Logger_user.razor.rz.scp.css */
/* User Activity Logger Dashboard - Modern Futuristic Design */

.logger-dashboard-container[b-d4rq1esivg] {
    min-height: 100vh;
    position: relative;
    background:black;
}

/* Header Section */
.dashboard-header[b-d4rq1esivg] {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    border-bottom: 1px solid rgba(139, 92, 246, 0.3);
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.1);
    padding: 20px 0;
    position: relative;
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
}

.dashboard-header.hidden[b-d4rq1esivg] {
    transform: translateY(-100%);
}



.header-content[b-d4rq1esivg] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

.header-stats[b-d4rq1esivg] {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    align-items: center;
}

.logo-section[b-d4rq1esivg] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.logo-glow[b-d4rq1esivg] {
    width: 60px;
    height: 60px;
    background: #8b5cf6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.2);
}

.logo-glow svg[b-d4rq1esivg] {
    color: #ffffff;
    width: 30px;
    height: 30px;
}

.logo-section h1[b-d4rq1esivg] {
    font-size: 2.2rem;
    font-weight: 300;
    margin: 0;
    letter-spacing: 2px;
}

.header-stats[b-d4rq1esivg] {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

.stat-card[b-d4rq1esivg] {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 12px;
    padding: 15px 20px;
    text-align: center;
    backdrop-filter: blur(3px);
    transition: all 0.3s ease;
    min-width: 120px;
}

.stat-card:hover[b-d4rq1esivg] {
    box-shadow: 0 5px 15px rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.6);
}

.stat-value[b-d4rq1esivg] {
    font-size: 2rem;
    font-weight: 700;
    color: #8b5cf6;
    margin-bottom: 5px;
    text-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

.stat-label[b-d4rq1esivg] {
    font-size: 0.9rem;
    color: #b8c5d6;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Header Actions */
.header-actions[b-d4rq1esivg] {
    display: flex;
    align-items: center;
    gap: 15px;
}

.refresh-button[b-d4rq1esivg] {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 12px;
    padding: 12px 20px;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(3px);
    text-transform: uppercase;
    letter-spacing: 1px;
    min-width: 140px;
    justify-content: center;
}

.refresh-button:hover:not(:disabled)[b-d4rq1esivg] {
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.6);
    background: rgba(139, 92, 246, 0.15);
}

.refresh-button:disabled[b-d4rq1esivg] {
    opacity: 0.7;
    cursor: not-allowed;
}

.refresh-icon[b-d4rq1esivg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.refresh-icon svg[b-d4rq1esivg] {
    color: #8b5cf6;
    width: 16px;
    height: 16px;
    transition: all 0.3s ease;
}

.refresh-button:hover:not(:disabled) .refresh-icon svg[b-d4rq1esivg] {
    color: #a855f7;
}

.refresh-text[b-d4rq1esivg] {
    font-size: 0.85rem;
    color: #b8c5d6;
    transition: all 0.3s ease;
}

.refresh-button:hover:not(:disabled) .refresh-text[b-d4rq1esivg] {
    color: #ffffff;
}

/* Loading Spinner Animation */
@keyframes spin-b-d4rq1esivg {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.animate-spin[b-d4rq1esivg] {
    animation: spin-b-d4rq1esivg 1s linear infinite;
}

/* Dashboard Content */
.dashboard-content[b-d4rq1esivg] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px;
}

/* Loading State */
.loading-section[b-d4rq1esivg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 30px;
}

.loading-spinner[b-d4rq1esivg] {
    width: 80px;
    height: 80px;
    border: 4px solid rgba(139, 92, 246, 0.1);
    border-left: 4px solid #8b5cf6;
    border-radius: 50%;
    animation: spin-b-d4rq1esivg 1s linear infinite;
}

.loading-text[b-d4rq1esivg] {
    font-size: 1.2rem;
    color: #b8c5d6;
    text-align: center;
}

/* Empty State */
.empty-state[b-d4rq1esivg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 20px;
    text-align: center;
}

.empty-icon[b-d4rq1esivg] {
    width: 120px;
    height: 120px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(139, 92, 246, 0.3);
}

.empty-icon svg[b-d4rq1esivg] {
    width: 60px;
    height: 60px;
    color: #8b5cf6;
}

.empty-state h3[b-d4rq1esivg] {
    font-size: 1.8rem;
    color: #ffffff;
    margin: 0;
}

.empty-state p[b-d4rq1esivg] {
    font-size: 1rem;
    color: #b8c5d6;
    max-width: 400px;
    line-height: 1.6;
}

/* Dashboard Grid */
.dashboard-grid[b-d4rq1esivg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

/* Chart Cards */
.chart-card[b-d4rq1esivg], .data-card[b-d4rq1esivg] {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.chart-card:hover[b-d4rq1esivg], .data-card:hover[b-d4rq1esivg] {
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.4);
}

.card-header[b-d4rq1esivg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    background: rgba(139, 92, 246, 0.05);
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.card-header h3[b-d4rq1esivg] {
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.card-icon[b-d4rq1esivg] {
    width: 40px;
    height: 40px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.card-icon svg[b-d4rq1esivg] {
    color: #8b5cf6;
    width: 20px;
    height: 20px;
}

.chart-container[b-d4rq1esivg] {
    padding: 25px;
    height: 300px;
    position: relative;
}

/* Full Width Card */
.full-width[b-d4rq1esivg] {
    grid-column: 1 / -1;
}

/* Table Styles */
.table-container[b-d4rq1esivg] {
    padding: 0;
    overflow-x: auto;
}

.activity-table[b-d4rq1esivg] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.activity-table thead[b-d4rq1esivg] {
    background: rgba(139, 92, 246, 0.05);
}

.activity-table th[b-d4rq1esivg] {
    padding: 15px 20px;
    text-align: left;
    font-weight: 600;
    color: #8b5cf6;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

/* Sortable header styles */
.sortable-header[b-d4rq1esivg] {
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    position: relative;
}

.sortable-header:hover[b-d4rq1esivg] {
    background: rgba(139, 92, 246, 0.1);
    color: #a855f7;
}

.sortable-header:hover .sort-icon[b-d4rq1esivg] {
    opacity: 1;
}

.header-content[b-d4rq1esivg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sort-icon[b-d4rq1esivg] {
    font-size: 0.8rem;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    display: inline-block;
    line-height: 1;
}

.sortable-header:hover .sort-icon[b-d4rq1esivg] {
    opacity: 1;
}

/* Active sort column styling */
.sortable-header.active-sort[b-d4rq1esivg] {
    background: rgba(139, 92, 246, 0.08);
    color: #a855f7;
}

.sortable-header.active-sort .sort-icon[b-d4rq1esivg] {
    opacity: 1;
}

.activity-table td[b-d4rq1esivg] {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.1);
    color: #b8c5d6;
}

.activity-table tbody tr[b-d4rq1esivg] {
    transition: all 0.2s ease;
}

.activity-table tbody tr:hover[b-d4rq1esivg] {
    background: rgba(139, 92, 246, 0.05);
}

.user-id[b-d4rq1esivg] {
    font-weight: 600;
    color: #ffffff;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metric[b-d4rq1esivg] {
    font-weight: 700;
    color: #8b5cf6;
    text-align: center;
    font-size: 1.1rem;
}

.date[b-d4rq1esivg] {
    color: #888;
    font-size: 0.9rem;
}

.feature[b-d4rq1esivg] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
}

.activity-details[b-d4rq1esivg] {
    max-width: 250px;
    min-width: 180px;
}

.activity-list[b-d4rq1esivg] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
}

.activity-list[b-d4rq1esivg]::-webkit-scrollbar {
    width: 4px;
}

.activity-list[b-d4rq1esivg]::-webkit-scrollbar-track {
    background: transparent;
}

.activity-list[b-d4rq1esivg]::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.3);
    border-radius: 2px;
}

.activity-list[b-d4rq1esivg]::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.5);
}

.activity-item[b-d4rq1esivg] {
    display: inline-block;
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 500;
    margin: 1px 0;
    border: 1px solid rgba(139, 92, 246, 0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Removed activity-more class as truncation is no longer used */

.no-activity[b-d4rq1esivg] {
    color: #666;
    font-size: 0.8rem;
    font-style: italic;
}

/* Essential Animations */
@keyframes spin-b-d4rq1esivg {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .header-content[b-d4rq1esivg] {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .header-stats[b-d4rq1esivg] {
        justify-content: center;
    }

    .stat-card[b-d4rq1esivg] {
        min-width: 100px;
    }

    .logo-section h1[b-d4rq1esivg] {
        font-size: 1.8rem;
    }

    .dashboard-content[b-d4rq1esivg] {
        padding: 20px;
    }

    .dashboard-grid[b-d4rq1esivg] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .card-header[b-d4rq1esivg] {
        padding: 15px 20px;
    }

    .card-header h3[b-d4rq1esivg] {
        font-size: 1rem;
    }

    .chart-container[b-d4rq1esivg] {
        padding: 20px;
        height: 250px;
    }

    .activity-table th[b-d4rq1esivg],
    .activity-table td[b-d4rq1esivg] {
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    .header-content[b-d4rq1esivg] {
        gap: 4px;
    }

    .sort-icon[b-d4rq1esivg] {
        font-size: 0.7rem;
    }

    .activity-details[b-d4rq1esivg] {
        max-width: 200px;
        min-width: 140px;
    }

    .activity-list[b-d4rq1esivg] {
        max-height: 100px;
        gap: 2px;
    }

    .activity-item[b-d4rq1esivg] {
        font-size: 0.65rem;
        padding: 2px 6px;
    }
}

/* Scrollbar Styling */
.table-container[b-d4rq1esivg]::-webkit-scrollbar {
    height: 8px;
}

.table-container[b-d4rq1esivg]::-webkit-scrollbar-track {
    background: rgba(139, 92, 246, 0.1);
    border-radius: 4px;
}

.table-container[b-d4rq1esivg]::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.5);
    border-radius: 4px;
}

.table-container[b-d4rq1esivg]::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.7);
}
/* /Pages/MailCampaigns.razor.rz.scp.css */
/* Mail Campaigns - Light Theme */

/* Animations */
@keyframes spin-b-z928x1y74g {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.mail-campaigns-page[b-z928x1y74g] {
    color: var(--lv-text-primary);
    margin: 1rem;
    font-family: var(--lv-font-main);
    font-size: var(--lv-font-size-base);
    line-height: var(--lv-line-height-base);
}

/* Toolbar Section */
.toolbar-section[b-z928x1y74g] {
    background: var(--lv-background-primary);
    border: 1px solid var(--lv-border-primary);
    border-radius: var(--lv-border-radius);
    padding: calc(var(--lv-spacing-unit) * 2);
    margin-bottom: calc(var(--lv-spacing-unit) * 2);
}

.toolbar-header[b-z928x1y74g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: calc(var(--lv-spacing-unit) * 2);
}

.page-title[b-z928x1y74g] {
    font-size: var(--lv-font-size-large);
    font-weight: 600;
    color: var(--lv-text-primary);
    margin: 0;
    font-family: var(--lv-font-heading);
}

.btn-primary[b-z928x1y74g] {
    background: var(--lv-background-accent);
    color: var(--lv-text-inverted);
    border: none;
    padding: calc(var(--lv-spacing-unit)) calc(var(--lv-spacing-unit) * 2);
    border-radius: var(--lv-border-radius-small);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--lv-font-size-base);
}


.btn-secondary[b-z928x1y74g] {
    background: transparent;
    color: var(--lv-text-primary);
    border: 1px solid var(--lv-border-primary);
    padding: calc(var(--lv-spacing-unit)) calc(var(--lv-spacing-unit) * 2);
    border-radius: var(--lv-border-radius-small);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--lv-font-size-base);
}

    .btn-secondary:hover[b-z928x1y74g] {
        background: var(--lv-hover-background);
    }


    .btn-primary.btn-shine:hover[b-z928x1y74g]::before {
        left: 100%;
    }

    .btn-primary.btn-shine:disabled[b-z928x1y74g] {
        opacity: .6;
        transform: none;
        box-shadow: none;
    }

/* Market Tab Buttons - No hover effects, simple active state */
.market-tab[b-z928x1y74g] {
    background: var(--lv-background-primary);
    color: var(--lv-text-primary);
    border: 1px solid var(--lv-border-primary);
    padding: calc(var(--lv-spacing-unit)) calc(var(--lv-spacing-unit) * 2);
    border-radius: var(--lv-border-radius-small);
    font-weight: 500;
    cursor: pointer;
    font-size: var(--lv-font-size-base);
    transition: none;
}

.market-tab-active[b-z928x1y74g] {
    background: var(--lv-background-accent);
    color: var(--lv-text-inverted);
    border: 1px solid var(--lv-background-accent);
}

/* Filters */
.filters-section[b-z928x1y74g] {
    display: flex;
    gap: calc(var(--lv-spacing-unit) * 1.5);
    flex-wrap: wrap;
    align-items: end;
}

.filter-group[b-z928x1y74g] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 150px;
}

.filter-label[b-z928x1y74g] {
    font-size: var(--lv-font-size-small);
    font-weight: 500;
    color: var(--lv-text-secondary);
}

.filter-select[b-z928x1y74g],
.filter-input[b-z928x1y74g] {
    background: var(--lv-background-primary);
    border: 1px solid var(--lv-border-primary);
    color: var(--lv-text-primary);
    padding: calc(var(--lv-spacing-unit));
    border-radius: var(--lv-border-radius-small);
    font-size: var(--lv-font-size-base);
    font-family: var(--lv-font-main);
}

    .filter-select:focus[b-z928x1y74g],
    .filter-input:focus[b-z928x1y74g] {
        outline: none;
        border-color: var(--lv-background-accent);
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
    }

/* Table */
.table-container[b-z928x1y74g] {
    background: var(--lv-background-primary);
    border: 1px solid var(--lv-border-primary);
    border-radius: var(--lv-border-radius);
    overflow: auto;
}

.campaigns-table[b-z928x1y74g] {
    width: 100%;
    border-collapse: collapse;
}

    .campaigns-table th[b-z928x1y74g],
    .campaigns-table td[b-z928x1y74g] {
        text-align: center !important;
        vertical-align: middle;
    }

        .campaigns-table td.actions-cell[b-z928x1y74g] {
            padding: 0; /* move padding to the inner wrapper so height matches neighbors */
        }

.actions-cell-inner[b-z928x1y74g] {
    display: flex;
    align-items: center;
    gap: calc(var(--lv-spacing-unit) * 0.5);
    height: 100%;
    justify-content: center;
    padding: calc(var(--lv-spacing-unit) * 1.5); /* same as other cells */
    white-space: nowrap; /* prevent button wrapping that would inflate row height */
}

.campaigns-table th[b-z928x1y74g] {
    background: var(--lv-background-secondary);
    font-weight: 600;
    color: var(--lv-text-primary);
    font-size: var(--lv-font-size-small);
    font-family: var(--lv-font-heading);
}


.campaigns-table td[b-z928x1y74g] {
    color: var(--lv-text-secondary);
    font-size: var(--lv-font-size-small);
}

.campaigns-table code[b-z928x1y74g] {
    background: var(--lv-background-secondary);
    padding: calc(var(--lv-spacing-unit) * 0.25) calc(var(--lv-spacing-unit) * 0.5);
    border-radius: var(--lv-border-radius-small);
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: var(--lv-font-size-small);
    color: var(--lv-text-primary);
}

/* Status Badges */
.status-badge[b-z928x1y74g] {
    padding: calc(var(--lv-spacing-unit) * 0.25) calc(var(--lv-spacing-unit) * 0.75);
    border-radius: 20px;
    font-size: var(--lv-font-size-small);
    font-weight: 500;
    text-transform: uppercase;
}

.status-draft[b-z928x1y74g] {
    background: rgba(156, 163, 175, 0.1);
    color: #9ca3af;
}

.status-ready[b-z928x1y74g] {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.status-pushed[b-z928x1y74g] {
    background: rgba(96, 165, 250, 0.1);
    color: #60a5fa;
}

.status-archived[b-z928x1y74g] {
    background: rgba(156, 163, 175, 0.1);
    color: #9ca3af;
}

/* Actions */
.actions-cell[b-z928x1y74g] {
    display: flex;
    gap: calc(var(--lv-spacing-unit) * 0.5);
}

.btn-link[b-z928x1y74g] {
    background: none;
    border: none;
    color: var(--lv-background-accent);
    cursor: pointer;
    font-size: var(--lv-font-size-base);
    padding: 0;
    text-decoration: underline;
}

    .btn-link:hover[b-z928x1y74g] {
        color: var(--lv-hover-accent);
    }

/* Empty State */
.empty-state[b-z928x1y74g] {
    padding: calc(var(--lv-spacing-unit) * 4);
    text-align: center;
    color: var(--lv-text-secondary);
}

/* Editor Panel */
.editor-panel[b-z928x1y74g] {
    position: fixed;
    top: 0;
    right: 0;
    width: 650px;
    height: 100vh;
    background: var(--lv-background-primary);
    border-left: 1px solid var(--lv-border-primary);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    overflow-y: auto;
}

.editor-header[b-z928x1y74g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(var(--lv-spacing-unit) * 2);
    border-bottom: 1px solid var(--lv-border-primary);
}

    .editor-header h2[b-z928x1y74g] {
        margin: 0;
        font-size: var(--lv-font-size-large);
        font-weight: 600;
        color: var(--lv-text-primary);
        font-family: var(--lv-font-heading);
    }

.btn-close[b-z928x1y74g] {
    background: none;
    border: none;
    color: var(--lv-text-secondary);
    font-size: var(--lv-font-size-large);
    cursor: pointer;
    padding: 0;
    width: calc(var(--lv-spacing-unit) * 2.5);
    height: calc(var(--lv-spacing-unit) * 2.5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--lv-border-radius-small);
}

    .btn-close:hover[b-z928x1y74g] {
        background: var(--lv-hover-background);
        color: var(--lv-text-primary);
    }

.editor-content[b-z928x1y74g] {
    padding: calc(var(--lv-spacing-unit) * 2);
}

/* Form Styles */
.form-group[b-z928x1y74g] {
    margin-bottom: calc(var(--lv-spacing-unit) * 1.5);
}

.form-row[b-z928x1y74g] {
    display: flex;
    gap: calc(var(--lv-spacing-unit) * 1.25);
}

    .form-row .form-group[b-z928x1y74g] {
        flex: 1;
        margin-bottom: 0;
    }

.form-label[b-z928x1y74g] {
    display: block;
    font-size: var(--lv-font-size-small);
    font-weight: 500;
    color: var(--lv-text-secondary);
    margin-bottom: calc(var(--lv-spacing-unit) * 0.5);
}

.form-input[b-z928x1y74g] {
    width: 100%;
    background: var(--lv-background-primary);
    border: 1px solid var(--lv-border-primary);
    color: var(--lv-text-primary);
    padding: calc(var(--lv-spacing-unit));
    border-radius: var(--lv-border-radius-small);
    font-size: var(--lv-font-size-base);
    font-family: var(--lv-font-main);
}

    .form-input:focus[b-z928x1y74g] {
        outline: none;
        border-color: var(--lv-background-accent);
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
    }

.validation-error[b-z928x1y74g] {
    color: #ef4444;
    font-size: var(--lv-font-size-small);
    margin-top: calc(var(--lv-spacing-unit) * 0.25);
    display: block;
    position: relative;
    z-index: 8000; /* Higher than modal overlay (7000) to ensure visibility */
}

/* Products Section */
.products-section h3[b-z928x1y74g] {
    font-size: var(--lv-font-size-base);
    font-weight: 600;
    color: var(--lv-text-primary);
    margin-bottom: calc(var(--lv-spacing-unit));
    font-family: var(--lv-font-heading);
}

.products-list[b-z928x1y74g] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--lv-spacing-unit));
}

.product-item[b-z928x1y74g] {
    display: flex;
    align-items: center;
    gap: calc(var(--lv-spacing-unit));
    padding: calc(var(--lv-spacing-unit));
    background: var(--lv-background-secondary);
    border: 1px solid var(--lv-border-secondary);
    border-radius: var(--lv-border-radius);
}

.product-image[b-z928x1y74g] {
    width: calc(var(--lv-spacing-unit) * 12);
    height: calc(var(--lv-spacing-unit) * 12);
    object-fit: cover;
    border-radius: var(--lv-border-radius-small);
}

.product-image-placeholder[b-z928x1y74g] {
    width: calc(var(--lv-spacing-unit) * 6);
    height: calc(var(--lv-spacing-unit) * 6);
    background: var(--lv-border-primary);
    border-radius: var(--lv-border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lv-text-disabled);
    font-size: var(--lv-font-size-small);
}

.product-info[b-z928x1y74g] {
    flex: 1;
}

.product-name[b-z928x1y74g] {
    font-weight: 500;
    color: var(--lv-text-primary);
    margin-bottom: calc(var(--lv-spacing-unit) * 0.25);
    font-size: var(--lv-font-size-base);
}

.product-meta[b-z928x1y74g] {
    display: flex;
    gap: calc(var(--lv-spacing-unit));
    font-size: var(--lv-font-size-small);
    color: var(--lv-text-secondary);
}

.product-actions[b-z928x1y74g] {
    display: flex;
    gap: calc(var(--lv-spacing-unit) * 0.25);
}

.btn-icon[b-z928x1y74g] {
    background: none;
    border: 1px solid var(--lv-border-primary);
    color: var(--lv-text-secondary);
    width: calc(var(--lv-spacing-unit) * 2.5);
    height: calc(var(--lv-spacing-unit) * 2.5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--lv-border-radius-small);
    cursor: pointer;
    font-size: var(--lv-font-size-small);
    transition: all 0.2s ease;
}

    .btn-icon:hover:not(:disabled)[b-z928x1y74g] {
        background: var(--lv-hover-background);
        color: var(--lv-text-primary);
    }

    .btn-icon:disabled[b-z928x1y74g] {
        opacity: 0.3;
        cursor: not-allowed;
    }

.btn-delete[b-z928x1y74g] {
    background: #ef4444;
    color: #ffffff;
    border: 1px solid #ef4444;
    padding: calc(var(--lv-spacing-unit)) calc(var(--lv-spacing-unit) * 2);
    border-radius: var(--lv-border-radius-small);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--lv-font-size-base);
}

    .btn-delete:hover:not(:disabled)[b-z928x1y74g] {
        background: #dc2626;
        border-color: #dc2626;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    }

.btn-remove[b-z928x1y74g] {
    color: #ef4444;
    border-color: #ef4444;
}

    .btn-remove:hover:not(:disabled)[b-z928x1y74g] {
        background: rgba(239, 68, 68, 0.1);
    }

/* Editor Actions */
.editor-actions[b-z928x1y74g] {
    display: flex;
    gap: calc(var(--lv-spacing-unit));
    margin-top: calc(var(--lv-spacing-unit) * 2.5);
    padding-top: calc(var(--lv-spacing-unit) * 1.25);
    border-top: 1px solid var(--lv-border-primary);
}

/* Modal Styles */
.campaign-modal-overlay[b-z928x1y74g] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 7000; /* Above global sidebar (z-index: 6000) - ensures modals stay on top */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--lv-spacing-unit) * 2.5);
}

.campaign-modal-content[b-z928x1y74g] {
    background: var(--lv-background-primary);
    border: 1px solid var(--lv-border-primary);
    border-radius: var(--lv-border-radius);
    width: 100%;
    max-width: 746px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.campaign-large-modal[b-z928x1y74g] {
    max-width: 746px;
}

.campaign-modal-header[b-z928x1y74g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(var(--lv-spacing-unit) * 2);
    border-bottom: 1px solid var(--lv-border-primary);
}

.campaign-modal-title[b-z928x1y74g] {
    margin: 0;
    font-size: var(--lv-font-size-large);
    font-weight: 600;
    color: var(--lv-text-primary);
    font-family: var(--lv-font-heading);
}

.campaign-modal-header h3[b-z928x1y74g] {
    margin: 0;
    font-size: var(--lv-font-size-large);
    font-weight: 600;
    color: var(--lv-text-primary);
    font-family: var(--lv-font-heading);
}

.campaign-modal-body[b-z928x1y74g] {
    padding: calc(var(--lv-spacing-unit) * 2);
    overflow-y: auto;
    flex: 1;
}

/* Product Picker */
.search-section[b-z928x1y74g] {
    margin-bottom: calc(var(--lv-spacing-unit) * 2);
}

.search-input-wrapper[b-z928x1y74g] {
    position: relative;
    width: 100%;
}

.search-icon[b-z928x1y74g] {
    position: absolute;
    left: calc(var(--lv-spacing-unit));
    top: 50%;
    transform: translateY(-50%);
    width: calc(var(--lv-spacing-unit) * 1.5);
    height: calc(var(--lv-spacing-unit) * 1.5);
    color: var(--lv-text-secondary);
    pointer-events: none;
}

.search-input[b-z928x1y74g] {
    width: 100%;
    background: var(--lv-background-primary);
    border: 1px solid var(--lv-border-primary);
    color: var(--lv-text-primary);
    padding: calc(var(--lv-spacing-unit)) calc(var(--lv-spacing-unit)) calc(var(--lv-spacing-unit)) calc(var(--lv-spacing-unit) * 3);
    border-radius: var(--lv-border-radius);
    font-size: var(--lv-font-size-base);
    font-family: var(--lv-font-main);
}

    .search-input:focus[b-z928x1y74g] {
        outline: none;
        border-color: var(--lv-background-accent);
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
    }

.loading-section[b-z928x1y74g], .error-section[b-z928x1y74g] {
    text-align: center;
    padding: calc(var(--lv-spacing-unit) * 4);
}

.loading-spinner[b-z928x1y74g] {
    margin-bottom: calc(var(--lv-spacing-unit) * 2);
}

.loading-spinner-large[b-z928x1y74g] {
    width: 64px;
    height: 64px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid var(--lv-background-accent);
    border-radius: 50%;
    animation: spin-b-z928x1y74g 1.5s linear infinite;
    margin: 0 auto;
}

@keyframes spin-b-z928x1y74g {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.error-icon[b-z928x1y74g] {
    font-size: 3rem;
    margin-bottom: calc(var(--lv-spacing-unit) * 1.5);
}

.products-info[b-z928x1y74g] {
    margin-bottom: calc(var(--lv-spacing-unit) * 1.5);
}

.success-message[b-z928x1y74g] {
    color: #22c55e;
    font-size: var(--lv-font-size-small);
    margin-bottom: calc(var(--lv-spacing-unit) * 0.5);
}

.products-count[b-z928x1y74g] {
    color: var(--lv-text-secondary);
    font-size: var(--lv-font-size-small);
    margin: 0;
}

    .products-count span[b-z928x1y74g] {
        color: var(--lv-background-accent);
        font-weight: 500;
    }

.products-table-container[b-z928x1y74g] {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--lv-border-primary);
    border-radius: var(--lv-border-radius);
}

.products-table[b-z928x1y74g] {
    width: 100%;
    border-collapse: collapse;
}

    .products-table th[b-z928x1y74g],
    .products-table td[b-z928x1y74g] {
        padding: calc(var(--lv-spacing-unit));
        text-align: left;
        border-bottom: 1px solid var(--lv-border-secondary);
        vertical-align: top;
    }

.sticky-header[b-z928x1y74g] {
    position: sticky;
    top: 0;
    background: var(--lv-background-primary);
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.checkbox-column[b-z928x1y74g] {
    width: 40px;
    text-align: center;
}

.header-checkbox[b-z928x1y74g],
.row-checkbox[b-z928x1y74g] {
    width: calc(var(--lv-spacing-unit) * 1.25);
    height: calc(var(--lv-spacing-unit) * 1.25);
    accent-color: var(--lv-background-accent);
}

.disabled-row[b-z928x1y74g] {
    opacity: 0.5;
    background: rgba(0, 0, 0, 0.02);
    cursor: not-allowed;
}

    .disabled-row:hover[b-z928x1y74g] {
        background: rgba(0, 0, 0, 0.02);
    }

.no-results[b-z928x1y74g] {
    text-align: center;
    color: var(--lv-text-secondary);
    font-style: italic;
    padding: calc(var(--lv-spacing-unit) * 2);
}

.more-results[b-z928x1y74g] {
    text-align: center;
    color: var(--lv-text-secondary);
    font-size: var(--lv-font-size-small);
    font-style: italic;
}

.products-table th[b-z928x1y74g] {
    background: var(--lv-background-secondary);
    font-weight: 600;
    color: var(--lv-text-primary);
    font-size: var(--lv-font-size-small);
    font-family: var(--lv-font-heading);
    position: sticky;
    top: 0;
}

.products-table td[b-z928x1y74g] {
    color: var(--lv-text-secondary);
    font-size: var(--lv-font-size-base);
}

.sku-cell[b-z928x1y74g] {
    font-family: 'Monaco', 'Menlo', monospace;
    font-weight: 500;
    color: var(--lv-text-primary);
}

.image-cell[b-z928x1y74g] {
    width: calc(var(--lv-spacing-unit) * 10);
}

.product-thumb[b-z928x1y74g] {
    width: calc(var(--lv-spacing-unit) * 6);
    height: calc(var(--lv-spacing-unit) * 6);
    object-fit: cover;
    border-radius: var(--lv-border-radius-small);
}

.no-image[b-z928x1y74g] {
    width: calc(var(--lv-spacing-unit) * 6);
    height: calc(var(--lv-spacing-unit) * 6);
    background: var(--lv-border-primary);
    border-radius: var(--lv-border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lv-text-disabled);
    font-size: var(--lv-font-size-small);
}

.btn-sm[b-z928x1y74g] {
    background: var(--lv-background-accent);
    color: var(--lv-text-inverted);
    border: none;
    padding: calc(var(--lv-spacing-unit) * 0.375) calc(var(--lv-spacing-unit) * 0.75);
    border-radius: var(--lv-border-radius-small);
    font-size: var(--lv-font-size-small);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-sm:hover:not(:disabled)[b-z928x1y74g] {
        background: var(--lv-hover-accent);
    }

    .btn-sm:disabled[b-z928x1y74g] {
        background: var(--lv-border-primary);
        color: var(--lv-text-disabled);
        cursor: not-allowed;
    }

/* Push Preview */
.campaign-summary[b-z928x1y74g] {
    background: var(--lv-background-secondary);
    border: 1px solid var(--lv-border-primary);
    border-radius: var(--lv-border-radius);
    padding: calc(var(--lv-spacing-unit) * 1.25);
    margin-bottom: calc(var(--lv-spacing-unit) * 1.5);
}

.summary-item[b-z928x1y74g] {
    margin-bottom: calc(var(--lv-spacing-unit) * 0.5);
    color: var(--lv-text-secondary);
    font-size: var(--lv-font-size-base);
}

    .summary-item:last-child[b-z928x1y74g] {
        margin-bottom: 0;
    }

.segment-toggle[b-z928x1y74g] {
    margin-bottom: calc(var(--lv-spacing-unit) * 1.5);
}

.toggle-label[b-z928x1y74g] {
    display: flex;
    align-items: center;
    gap: calc(var(--lv-spacing-unit) * 0.5);
    color: var(--lv-text-primary);
    font-size: var(--lv-font-size-base);
    cursor: pointer;
}

    .toggle-label input[type="checkbox"][b-z928x1y74g] {
        width: calc(var(--lv-spacing-unit) * 1.25);
        height: calc(var(--lv-spacing-unit) * 1.25);
    }

.products-preview h4[b-z928x1y74g] {
    font-size: var(--lv-font-size-base);
    font-weight: 600;
    color: var(--lv-text-primary);
    margin-bottom: calc(var(--lv-spacing-unit));
    font-family: var(--lv-font-heading);
}

.products-grid[b-z928x1y74g] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: calc(var(--lv-spacing-unit) * 1.25);
    margin-bottom: calc(var(--lv-spacing-unit) * 1.5);
}

.product-card[b-z928x1y74g] {
    background: var(--lv-background-primary);
    border: 1px solid var(--lv-border-secondary);
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.product-card-image[b-z928x1y74g] {
    width: 100%;
    border: 1px solid #00000021;
    object-fit: cover;
    margin-bottom: 1rem;
}

.product-card-content[b-z928x1y74g] {
    padding: calc(var(--lv-spacing-unit));
}

.product-card h5[b-z928x1y74g] {
    font-size: var(--lv-font-size-base);
    font-weight: 500;
    color: var(--lv-text-primary);
    margin: 0 0 calc(var(--lv-spacing-unit) * 0.5) 0;
}

.product-card-meta[b-z928x1y74g] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--lv-spacing-unit) * 0.25);
    font-size: var(--lv-font-size-small);
    color: var(--lv-text-secondary);
}

.campaign-modal-footer[b-z928x1y74g] {
    position: sticky;
    bottom: 0;
    background: var(--lv-background-primary);
    border-top: 1px solid var(--lv-border-primary);
    padding: calc(var(--lv-spacing-unit) * 1.5) calc(var(--lv-spacing-unit) * 2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
}

.selection-info[b-z928x1y74g] {
    color: var(--lv-text-secondary);
    font-size: var(--lv-font-size-small);
    font-weight: 500;
}

.footer-buttons[b-z928x1y74g] {
    display: flex;
    gap: calc(var(--lv-spacing-unit));
}

    .footer-buttons .btn-primary:disabled[b-z928x1y74g] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.campaign-modal-actions[b-z928x1y74g] {
    display: flex;
    gap: calc(var(--lv-spacing-unit));
    justify-content: flex-end;
    padding:10px;
    border-top: 1px solid var(--lv-border-primary);
}

/* Sidebar-aware responsive styles */
@media (min-width: 641px) {
    /* When sidebar is visible - ensure modals don't conflict */
    .campaign-modal-overlay[b-z928x1y74g] {
        /* Adapt positioning if sidebar affects layout */
        left: 0;
        right: 0;
    }

    .campaign-modal-content[b-z928x1y74g] {
        /* Ensure proper sizing when sidebar is present */
        max-width: min(746px, calc(100vw - var(--lv-spacing-unit) * 4));
    }

    .campaign-large-modal[b-z928x1y74g] {
        max-width: min(746px, calc(100vw - var(--lv-spacing-unit) * 4));
    }
}

/* Tablet responsive styles (sidebar collapsed area) */
@media (max-width: 1024px) and (min-width: 641px) {
    .campaign-modal-content[b-z928x1y74g] {
        max-width: min(746px, calc(100vw - var(--lv-spacing-unit) * 6));
    }

    .campaign-large-modal[b-z928x1y74g] {
        max-width: min(746px, calc(100vw - var(--lv-spacing-unit) * 6));
    }

    .campaign-modal-overlay[b-z928x1y74g] {
        padding: calc(var(--lv-spacing-unit) * 2);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .editor-panel[b-z928x1y74g] {
        position: fixed;
        top: 5rem;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: calc(100vh - 5rem);
        overflow-y: auto;
    }

    .filters-section[b-z928x1y74g] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group[b-z928x1y74g] {
        min-width: auto;
    }

    .toolbar-header[b-z928x1y74g] {
        flex-direction: column;
        align-items: flex-start;
        gap: calc(var(--lv-spacing-unit) * 1.25);
    }

    .actions-cell[b-z928x1y74g] {
        flex-direction: column;
        gap: calc(var(--lv-spacing-unit) * 0.25);
    }

    .product-item[b-z928x1y74g] {
        flex-direction: column;
        align-items: flex-start;
        gap: calc(var(--lv-spacing-unit) * 0.5);
    }

    .product-meta[b-z928x1y74g] {
        flex-direction: column;
        gap: calc(var(--lv-spacing-unit) * 0.25);
    }

    /* Products table responsive */
    .products-table-container[b-z928x1y74g] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .products-table[b-z928x1y74g] {
        min-width: 700px;
    }

    .search-section[b-z928x1y74g] {
        margin-bottom: calc(var(--lv-spacing-unit) * 1.5);
    }

    .search-input[b-z928x1y74g] {
        font-size: 16px; /* Prevent zoom on iOS */
    }

    .products-grid[b-z928x1y74g] {
        grid-template-columns: 1fr;
    }
}

/* Warning pill styling */
.warning-pill[b-z928x1y74g] {
    background-color: #fef3c7;
    color: #92400e;
    padding: 4px 8px;
    border-radius: var(--lv-border-radius-small);
    font-size: var(--lv-font-size-small);
    font-weight: 500;
    border: 1px solid #f59e0b;
}

/* Product detail modal styling */
.product-detail-content[b-z928x1y74g] {
    gap: 24px;
}

.product-detail-readonly[b-z928x1y74g],
.product-detail-editable[b-z928x1y74g] {
    padding: 1rem;
}

.readonly-fields[b-z928x1y74g] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.field-row[b-z928x1y74g] {
    align-items: center;
    gap: 8px;
}

    .field-row label[b-z928x1y74g] {
        font-weight: 500;
        min-width: 120px;
    }

.detail-image-preview[b-z928x1y74g] {
    max-width: 150px;
    max-height: 150px;
    object-fit: contain;
}

.no-image[b-z928x1y74g] {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--lv-background-secondary);
    border: 1px solid var(--lv-border-primary);
    border-radius: var(--lv-border-radius-small);
    color: var(--lv-text-secondary);
    font-size: var(--lv-font-size-small);
}

.product-card-actions[b-z928x1y74g] {
    margin-top: 8px;
}

    .product-card-actions .btn-link[b-z928x1y74g] {
        font-size: var(--lv-font-size-small);
        color: var(--lv-text-secondary);
    }

        .product-card-actions .btn-link:hover[b-z928x1y74g] {
            color: var(--lv-text-primary);
        }

/* Confirmation modal styling */
.confirmation-content[b-z928x1y74g] {
    text-align: center;
    margin-bottom: 24px;
}

    .confirmation-content p[b-z928x1y74g] {
        margin: 12px 0;
        line-height: var(--lv-line-height-base);
    }

    .confirmation-content strong[b-z928x1y74g] {
        color: black;
    }

.campaign-summary-push[b-z928x1y74g] {
    background: var(--lv-background-secondary);
    border: 1px solid var(--lv-border-primary);
    border-radius: var(--lv-border-radius-small);
    padding: 1rem;
    margin-top: 1rem;
}

    .campaign-summary-push .summary-item[b-z928x1y74g] {
        margin-bottom: 0.5rem;
        color: var(--lv-text-secondary);
        font-size: var(--lv-font-size-small);
    }

        .campaign-summary-push .summary-item:last-child[b-z928x1y74g] {
            margin-bottom: 0;
        }

/* Modal size variants */
.campaign-small-modal[b-z928x1y74g] {
    max-width: 400px;
}

/* Product detail modal: fixed image box */
.image-preview[b-z928x1y74g] {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

@media (max-width: 640px) {
    .image-preview[b-z928x1y74g] {
        width: 220px;
        height: 220px;
    }
}

/* ==== Mobile-first modal fixes (place at END of CSS) ==== */

/* Shared tweaks that are safe for all sizes */
.campaign-modal-content[b-z928x1y74g] {
    display: flex;
    flex-direction: column;
}

/* Phone + small tablets */
@media (max-width: 768px) {
    /* Always leave space for the 5rem navbar */
    .campaign-modal-overlay[b-z928x1y74g] {
        position: fixed;
        top: 5rem !important; /* navbar height */
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0.75rem; /* tighter mobile padding */
        background: rgba(0,0,0,0.5);
        backdrop-filter: blur(4px);
        display: flex;
        align-items: flex-start; /* start under navbar, not centered */
        justify-content: center; /* center horizontally */
    }

    /* Modal sizing: full width, height minus navbar + paddings */
    .campaign-modal-content[b-z928x1y74g],
    .campaign-large-modal[b-z928x1y74g],
    .campaign-small-modal[b-z928x1y74g] {
        width: 100%;
        max-width: 100% !important;
        margin: 0;
        border-radius: 10px;
        max-height: calc(100vh - 5rem - 1.5rem); /* 5rem navbar + vertical padding */
        overflow: hidden; /* keep header/footer visible */
    }

    /* Header/body/footer layout */
    .campaign-modal-header[b-z928x1y74g] {
        padding: 1rem;
        border-bottom: 1px solid var(--lv-border-primary);
        flex: 0 0 auto;
    }

    .campaign-modal-body[b-z928x1y74g] {
        padding: 1rem;
        overflow-y: auto; /* scroll only the body */
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto; /* take remaining height */
    }

    .campaign-modal-footer[b-z928x1y74g],
    .campaign-modal-actions[b-z928x1y74g] {
        padding: 0.75rem 1rem;
        border-top: 1px solid var(--lv-border-primary);
        background: var(--lv-background-primary);
        flex: 0 0 auto;
        position: sticky;
        bottom: 0; /* stays visible while body scrolls */
        box-shadow: 0 -1px 3px rgba(0,0,0,0.08);
    }

        /* Buttons stack nicely on small screens */
        .campaign-modal-footer .footer-buttons[b-z928x1y74g],
        .campaign-modal-actions[b-z928x1y74g] {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

    /* Search/table spacing */
    .search-section[b-z928x1y74g] {
        margin-bottom: 0.75rem;
    }

    .products-table-container[b-z928x1y74g] {
        max-height: none;
    }
    /* body already controls height */

    /* Make the picker table horizontally scrollable without breaking layout */
    .products-table[b-z928x1y74g] {
        min-width: 640px; /* keep columns readable */
    }

    /* Product detail modal mobile layout */
    .product-detail-content[b-z928x1y74g] {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .product-detail-readonly[b-z928x1y74g],
    .product-detail-editable[b-z928x1y74g] {
        flex: none !important;
        width: 100% !important;
    }

    /* Add clear separation between sections */
    .product-detail-editable[b-z928x1y74g] {
        border-top: 2px solid var(--lv-border-secondary);
        padding-top: 1.5rem;
        margin-top: 1rem;
    }
}

/* Very small phones */
@media (max-width: 480px) {
    .campaign-modal-overlay[b-z928x1y74g] {
        padding: 0.5rem;
    }

    .campaign-modal-content[b-z928x1y74g],
    .campaign-large-modal[b-z928x1y74g],
    .campaign-small-modal[b-z928x1y74g] {
        border-radius: 8px;
        max-height: calc(100vh - 5rem - 1rem);
    }

    .campaign-modal-header[b-z928x1y74g] {
        padding: 0.75rem;
    }

    .campaign-modal-body[b-z928x1y74g] {
        padding: 0.75rem;
    }

    .campaign-modal-footer[b-z928x1y74g],
    .campaign-modal-actions[b-z928x1y74g] {
        padding: 0.5rem 0.75rem;
    }

    /* Tighten text a bit for mobile */
    .campaign-modal-title[b-z928x1y74g] {
        font-size: calc(var(--lv-font-size-base));
    }
}

/* Optional: improve iOS safe-area behavior (not harmful elsewhere) */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .campaign-modal-overlay[b-z928x1y74g] {
            padding-left: max(0.5rem, env(safe-area-inset-left));
            padding-right: max(0.5rem, env(safe-area-inset-right));
            /* top is fixed by navbar; bottom safe-area for home indicator */
            padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
        }
    }
}

/* Base look for table action buttons */
.actions-cell .btn-action[b-z928x1y74g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 9999px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background-color .18s, border-color .18s, color .18s, box-shadow .18s, transform .04s;
}

    .actions-cell .btn-action:focus-visible[b-z928x1y74g] {
        outline: 0;
        box-shadow: 0 0 0 3px rgba(37,99,235,.35);
    }

    .actions-cell .btn-action:active[b-z928x1y74g] {
        transform: translateY(1px);
    }

    .actions-cell .btn-action:disabled[b-z928x1y74g] {
        background: #f3f4f6;
        color: #9ca3af;
        border-color: #e5e7eb;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }

/* Edit (neutral) */
.actions-cell .btn-edit[b-z928x1y74g] {
    background: #ffffff;
    color: #1f2937;
    border-color: #d1d5db;
}

    .actions-cell .btn-edit:hover:not(:disabled)[b-z928x1y74g] {
        background: #f9fafb;
        border-color: #cbd5e1;
    }

/* Push (positive) */
.actions-cell .btn-push[b-z928x1y74g] {
    background: #059669;
    border-color: #059669;
    color: #fff;
}

    .actions-cell .btn-push:hover:not(:disabled)[b-z928x1y74g] {
        background: #047857;
        border-color: #047857;
    }

/* Delete (destructive) */
.actions-cell .btn-delete[b-z928x1y74g] {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

    .actions-cell .btn-delete:hover:not(:disabled)[b-z928x1y74g] {
        background: #dc2626;
        border-color: #dc2626;
    }

@keyframes spin-b-z928x1y74g {
    to {
        transform: rotate(360deg);
    }
}

.toast-container[b-z928x1y74g] {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 8001; /* Higher than modal overlay (7000) and validation errors (8000) to ensure toast is always visible */
}

/* Mobile view: position toast below fixed navbar (5rem) */
@media (max-width: 768px) {
    .toast-container[b-z928x1y74g] {
        top: calc(5rem + 16px); /* Navbar height (5rem) + spacing */
    }
}

.toast[b-z928x1y74g] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--lv-border-radius);
    color: var(--lv-text-inverted);
    box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 6px 6px rgba(0,0,0,.08);
    animation: toast-in-b-z928x1y74g 180ms ease-out;
    max-width: 420px;
}

.toast-success[b-z928x1y74g] {
    background: #10b981;
}
/* emerald-500 */
.toast-error[b-z928x1y74g] {
    background: #ef4444;
}
/* red-500 */
.toast-info[b-z928x1y74g] {
    background: #3b82f6;
}
/* blue-500 */

.toast-icon[b-z928x1y74g] {
    font-size: 18px;
    line-height: 1;
}

.toast-message[b-z928x1y74g] {
    font-size: var(--lv-font-size-base);
}

.toast-close[b-z928x1y74g] {
    margin-left: 4px;
    background: transparent;
    color: inherit;
    border: 0;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: .9;
}

    .toast-close:hover[b-z928x1y74g] {
        opacity: 1;
    }

@keyframes toast-in-b-z928x1y74g {
    from {
        transform: translateY(-8px);
        opacity: 0;
    }

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

/* ==== Filters UX polish ==== */

.toolbar-section[b-z928x1y74g] {
    position: sticky;
    top: 0;
    z-index: 200; /* below modals (7000+) but above content */
    background: var(--lv-background-primary);
}

/* Grid the filters: status | period | search | reset */
.filters-section[b-z928x1y74g] {
    grid-template-columns: 1.2fr 1.6fr 1.6fr auto;
    gap: calc(var(--lv-spacing-unit) * 1.25);
    align-items: end;
}

/* Inputs: consistent height and hit area */
.filter-select[b-z928x1y74g],
.filter-input[b-z928x1y74g],
.table-search-input[b-z928x1y74g] {
    height: 38px;
    line-height: 38px;
    padding: 0 calc(var(--lv-spacing-unit));
    border-radius: 8px;
}

/* Segmented control (replaces the status <select>) */
.segmented[b-z928x1y74g] {
    display: inline-grid;
    grid-auto-flow: column;
    gap: 0;
    background: var(--lv-background-secondary);
    border: 1px solid var(--lv-border-primary);
    border-radius: 9999px;
    padding: 2px;
}

    .segmented input[type="radio"][b-z928x1y74g] {
        display: none;
    }

    .segmented label[b-z928x1y74g] {
        user-select: none;
        cursor: pointer;
        padding: 6px 12px;
        font-size: 13px;
        font-weight: 600;
        color: var(--lv-text-secondary);
        border-radius: 9999px;
        transition: background .15s, color .15s;
    }

    .segmented input[type="radio"]:checked + label[b-z928x1y74g] {
        background: var(--lv-background-accent);
        color: var(--lv-text-inverted);
    }

    .segmented label:hover[b-z928x1y74g] {
        background: var(--lv-hover-background);
        color: var(--lv-text-primary);
    }

/* Date range: inline layout with subtle dash */
.date-range[b-z928x1y74g] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .date-range .filter-input[b-z928x1y74g] {
        min-width: 0;
        width: 48%;
    }

    .date-range .date-sep[b-z928x1y74g] {
        color: var(--lv-text-disabled);
        font-weight: 600;
    }

.btn-ghost.small[b-z928x1y74g] {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--lv-border-primary);
    background: transparent;
    border-radius: 8px;
    font-size: 12px;
    color: var(--lv-text-secondary);
    cursor: pointer;
}

    .btn-ghost.small:hover:not(:disabled)[b-z928x1y74g] {
        background: var(--lv-hover-background);
    }

    .btn-ghost.small:disabled[b-z928x1y74g] {
        opacity: .5;
        cursor: not-allowed;
    }

/* Table search: icon inside with clear button */
.table-search-container[b-z928x1y74g] {
    position: relative;
}

.table-search-icon[b-z928x1y74g] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    opacity: .55;
}

.table-search-input[b-z928x1y74g] {
    width: 100%;
    padding-left: 36px; /* room for icon */
    padding-right: 36px; /* room for clear */
}

.table-clear-search-btn[b-z928x1y74g] {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    height: 28px;
    width: 28px;
    background: none;
    border: none;
    color: var(--lv-text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    color: #000;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

    .table-clear-search-btn:hover[b-z928x1y74g] {
        opacity: 0.7;
    }

/* Reset button alignment */
.filters-actions[b-z928x1y74g] {
    display: flex;
    justify-content: flex-end;
}

.btn-reset .reset-count[b-z928x1y74g] {
    margin-left: 4px;
    color: var(--lv-text-secondary);
}

/* Tiny helper text under search */
.filter-hint[b-z928x1y74g] {
    margin-top: 4px;
    font-size: 11px;
    color: var(--lv-text-disabled);
}

    .filter-hint kbd[b-z928x1y74g] {
        border: 1px solid var(--lv-border-primary);
        border-bottom-width: 2px;
        border-radius: 4px;
        padding: 0 4px;
        font-size: 10px;
        background: var(--lv-background-secondary);
    }

.refresh-btn[b-z928x1y74g],
.retry-btn[b-z928x1y74g] {
    padding: 6px 8px;
    background: linear-gradient(145deg, #000000, #333333);
    color: white;
    border: 2px solid transparent;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .refresh-btn[b-z928x1y74g]::before,
    .retry-btn[b-z928x1y74g]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s ease;
    }

    .refresh-btn:hover[b-z928x1y74g]::before,
    .retry-btn:hover[b-z928x1y74g]::before {
        left: 100%;
    }

    .refresh-btn:hover:not(:disabled)[b-z928x1y74g],
    .retry-btn:hover[b-z928x1y74g] {
        background: linear-gradient(145deg, #333333, #4c51bf);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

/* Responsive stack */
@media (max-width: 960px) {
    .filters-section[b-z928x1y74g] {
        grid-template-columns: 1fr 1fr;
    }

    .actions-group[b-z928x1y74g] {
        order: 99;
    }
}

@media (max-width: 640px) {
    .filters-section[b-z928x1y74g] {
        grid-template-columns: 1fr;
    }

    .date-range .filter-input[b-z928x1y74g] {
        width: 100%;
    }
}

/* --- simple icon styling --- */
.actions-cell .btn-action svg[b-z928x1y74g],
.btn-icon svg[b-z928x1y74g] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}

/* compact action buttons (quiet) */
.actions-cell .btn-action[b-z928x1y74g] {
    height: 26px;
    padding: 0 8px;
    gap: 6px;
    font-size: 12px;
    border-radius: 9999px;
}

/* icon-only buttons used in product list (? ? �) */
.btn-icon[b-z928x1y74g] {
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
}

    .btn-icon:hover:not(:disabled)[b-z928x1y74g] {
        background: #f9fafb;
    }

    .btn-icon:disabled[b-z928x1y74g] {
        opacity: .45;
    }

/* optional: hide text on narrow tables */
@media (max-width: 1100px) {
    .actions-cell .btn-action .btn-text[b-z928x1y74g] {
        display: none;
    }

    .actions-cell .btn-action[b-z928x1y74g] {
        width: 28px;
        padding: 0;
        justify-content: center;
    }
}

.link-button[b-z928x1y74g] {
    background: none;
    border: none;
    padding: 0;
    color: #2563eb;
    cursor: pointer;
    text-decoration: underline;
    font: inherit;
}

    .link-button:hover[b-z928x1y74g] {
        text-decoration: none;
    }


/* Center the action buttons in the Actions column */
.campaigns-table td.actions-cell[b-z928x1y74g] {
    display: flex; /* already set, but ensure here */
    justify-content: center !important; /* center horizontally */
    align-items: center; /* center vertically to row height */
    padding-left: 0;
    padding-right: 0;
}

    /* Make the inner wrapper a centered flex row */
    .campaigns-table td.actions-cell .actions-cell-inner[b-z928x1y74g] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px; /* keep your button spacing */
        margin: 0 auto; /* belt-and-suspenders centering */
    }

/* Small screens: if you stack, keep it centered */
@media (max-width: 768px) {
    .campaigns-table td.actions-cell .actions-cell-inner[b-z928x1y74g] {
        flex-direction: column;
    }
}


.dt-date[b-z928x1y74g] {
    font-weight: 500;
}

.dt-time[b-z928x1y74g] {
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    padding: 0 .35rem;
    border-radius: 6px;
    background: var(--lv-background-secondary);
    color: var(--lv-text-primary);
}

.dt-sep[b-z928x1y74g] {
    margin: 0 .25rem;
    opacity: .6;
}

.time-cell .dt[b-z928x1y74g] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
    gap: 2px;
}

.time-cell .dt-date[b-z928x1y74g] {
    font-weight: 600;
}

.time-cell .dt-time[b-z928x1y74g] {
    font-size: var(--lv-font-size-small);
    color: var(--lv-text-secondary);
    letter-spacing: .2px;
}

.time-cell[b-z928x1y74g] {
    min-width: 140px;
}

/* Journey Link Button - Remove hover effects for instant click */
.journey-link:hover[b-z928x1y74g],
.journey-link:active[b-z928x1y74g] {
    transform: none !important;
    box-shadow: none !important;
    background: inherit !important;
}

/* Mail Preview Product Layout */
.mail-preview-product[b-z928x1y74g] {
    display: flex;
    align-items: center;
    padding: 30px 20px;
    background: #fff;
    gap: 30px;
}

.mail-preview-product-image[b-z928x1y74g] {
    flex-shrink: 0;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mail-preview-image[b-z928x1y74g] {
    max-width: 100%;
    max-height: 300px;
    height: auto;
    display: block;
    border: none;
    object-fit: contain;
}

.mail-preview-image-placeholder[b-z928x1y74g] {
    width: 200px;
    height: 200px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    border-radius: 4px;
}

.mail-preview-product-content[b-z928x1y74g] {
    flex: 1;
    min-width: 0;
}

.mail-preview-product-title[b-z928x1y74g] {
    margin: 0 0 15px 0;
    font-size: 24px;
    font-weight: 700;
}

.mail-preview-product-series[b-z928x1y74g] {
    margin: 0 0 20px 0;
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mail-preview-product-description[b-z928x1y74g] {
    line-height: 1.6;
}

/* Mail preview header (Subject/Preheader) */
.mail-preview-header[b-z928x1y74g] {
    margin-bottom: 0;
    padding: 0;
    background: transparent;
    border: none;
}

.mail-preview-row[b-z928x1y74g] {
    margin-bottom: 15px;
}

.mail-preview-label[b-z928x1y74g] {
    color: #333;
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.mail-preview-value[b-z928x1y74g] {
    color: #000;
    background: #fff; /* match email canvas */
    padding: 0;
    border: none;
    border-radius: 0;
    line-height: 1.4;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    word-break: break-word;
    white-space: normal;
}

.mail-preview-value.is-preheader[b-z928x1y74g] {
    font-weight: 400;
    font-style: normal;
}

.mail-preview-sep[b-z928x1y74g] {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 8px 0 16px 0;
}

.mail-preview-description-text[b-z928x1y74g] {
    color: #333;
    font-size: 14px;
    white-space: pre-wrap;
}

.mail-preview-description-empty[b-z928x1y74g] {
    color: #999;
    font-style: italic;
    font-size: 14px;
}

/* Mobile responsive for Mail Preview */
@media (max-width: 768px) {
    .mail-preview-product[b-z928x1y74g] {
        flex-direction: column;
        gap: 20px;
        padding: 20px 15px;
    }

    .mail-preview-product-image[b-z928x1y74g] {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .mail-preview-image[b-z928x1y74g] {
        width: 100%;
        max-width: 100%;
        max-height: none;
    }

    .mail-preview-image-placeholder[b-z928x1y74g] {
        width: 100%;
        max-width: 300px;
        height: 200px;
    }

    .mail-preview-product-title[b-z928x1y74g] {
        font-size: 20px;
    }

    .mail-preview-description-text[b-z928x1y74g] {
        font-size: 13px;
    }
}
/* /Pages/NewRegCustomer.razor.rz.scp.css */
/* Sales search container styling */
.sales-search-container[b-taiouni5x1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.search-controls[b-taiouni5x1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-size-selector[b-taiouni5x1] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.page-size-dropdown[b-taiouni5x1] {
    padding: 4px 8px;
    border: 1px solid var(--lv-border-primary, #e5e7eb);
    border-radius: var(--lv-border-radius, 10px);
    background: var(--lv-background-primary, #ffffff);
    font-size: var(--lv-font-size-small, 12px);
    min-width: 60px;
}

/* Pagination styling - matching CustomerClassification */
.table-footer[b-taiouni5x1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lv-border-primary, #e5e7eb);
}

.pagination-info[b-taiouni5x1] {
    flex: 1;
}

.pagination-info p[b-taiouni5x1] {
    margin: 0;
    font-size: var(--lv-font-size-small, 12px);
    color: var(--lv-text-secondary, #6b7280);
}

.pagination-controls[b-taiouni5x1] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pagination-btn[b-taiouni5x1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--lv-border-primary, #e5e7eb);
    border-radius: var(--lv-border-radius, 10px);
    background: var(--lv-background-primary, #ffffff);
    color: var(--lv-text-primary, #374151);
    cursor: pointer;
    font-size: var(--lv-font-size-small, 12px);
    font-weight: 600;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(.disabled)[b-taiouni5x1] {
    background: var(--lv-hover-background, #f9fafb);
    border-color: var(--lv-background-accent, #000000);
    color: var(--lv-background-accent, #000000);
}

.pagination-btn.active[b-taiouni5x1] {
    background: var(--lv-background-accent, #000000);
    color: var(--lv-text-inverted, #ffffff);
    border-color: var(--lv-background-accent, #000000);
}

.pagination-btn.disabled[b-taiouni5x1] {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--lv-background-secondary, #f8fafc);
    color: var(--lv-text-disabled, #9ca3af);
}

.page-number[b-taiouni5x1] {
    min-width: 32px;
}

/* Mobile pagination styling */
@media (max-width: 646px) {
    /* Smaller pagination buttons */
    .pagination-btn[b-taiouni5x1] {
        width: 28px;
        height: 28px;
        font-size: 11px;
        border-width: 1px;
    }

    .pagination-btn.page-number[b-taiouni5x1] {
        min-width: 28px;
        padding: 0 4px;
    }

    .pagination-controls[b-taiouni5x1] {
        gap: 2px;
    }

    /* Stack table footer vertically on mobile */
    .table-footer[b-taiouni5x1] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .pagination-info[b-taiouni5x1] {
        text-align: center;
        order: 2;
    }

    .pagination-controls[b-taiouni5x1] {
        justify-content: center;
        order: 1;
    }

    /* Responsive search container */
    .sales-search-container[b-taiouni5x1] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .search-controls[b-taiouni5x1] {
        justify-content: center;
    }

    .page-size-selector[b-taiouni5x1] {
        justify-content: center;
    }
}
/* /Pages/Sales.razor.rz.scp.css */
abbr.compare-tooltip[b-dmumsolv0i] {
    text-decoration: dotted underline;
    cursor: help;
}

.sales-tooltip[b-dmumsolv0i] {
    position: relative;
    cursor: help;
}

/* Sales search container styling */
.sales-search-container[b-dmumsolv0i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.search-controls[b-dmumsolv0i] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-size-selector[b-dmumsolv0i] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.page-size-dropdown[b-dmumsolv0i] {
    padding: 4px 8px;
    border: 1px solid var(--lv-border-primary, #e5e7eb);
    border-radius: var(--lv-border-radius, 10px);
    background: var(--lv-background-primary, #ffffff);
    font-size: var(--lv-font-size-small, 12px);
    min-width: 60px;
}

/* Pagination styling - matching CustomerClassification */
.table-footer[b-dmumsolv0i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lv-border-primary, #e5e7eb);
}

.pagination-info[b-dmumsolv0i] {
    flex: 1;
}

.pagination-info p[b-dmumsolv0i] {
    margin: 0;
    font-size: var(--lv-font-size-small, 12px);
    color: var(--lv-text-secondary, #6b7280);
}

.pagination-controls[b-dmumsolv0i] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pagination-btn[b-dmumsolv0i] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--lv-border-primary, #e5e7eb);
    border-radius: var(--lv-border-radius, 10px);
    background: var(--lv-background-primary, #ffffff);
    color: var(--lv-text-primary, #374151);
    cursor: pointer;
    font-size: var(--lv-font-size-small, 12px);
    font-weight: 600;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(.disabled)[b-dmumsolv0i] {
    background: var(--lv-hover-background, #f9fafb);
    border-color: var(--lv-background-accent, #000000);
    color: var(--lv-background-accent, #000000);
}

.pagination-btn.active[b-dmumsolv0i] {
    background: var(--lv-background-accent, #000000);
    color: var(--lv-text-inverted, #ffffff);
    border-color: var(--lv-background-accent, #000000);
}

.pagination-btn.disabled[b-dmumsolv0i] {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--lv-background-secondary, #f8fafc);
    color: var(--lv-text-disabled, #9ca3af);
}

.page-number[b-dmumsolv0i] {
    min-width: 32px;
}

/* Mobile pagination styling */
@media (max-width: 646px) {
    /* Smaller pagination buttons */
    .pagination-btn[b-dmumsolv0i] {
        width: 28px;
        height: 28px;
        font-size: 11px;
        border-width: 1px;
    }

    .pagination-btn.page-number[b-dmumsolv0i] {
        min-width: 28px;
        padding: 0 4px;
    }

    .pagination-controls[b-dmumsolv0i] {
        gap: 2px;
    }

    /* Stack table footer vertically on mobile */
    .table-footer[b-dmumsolv0i] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .pagination-info[b-dmumsolv0i] {
        text-align: center;
        order: 2;
    }

    .pagination-controls[b-dmumsolv0i] {
        justify-content: center;
        order: 1;
    }

    /* Responsive search container */
    .sales-search-container[b-dmumsolv0i] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .search-controls[b-dmumsolv0i] {
        justify-content: center;
    }

    .page-size-selector[b-dmumsolv0i] {
        justify-content: center;
    }
}

/* /Pages/SalesAnalytics.razor.rz.scp.css */
/* Sales Analytics Page Styles - Mobile-First Responsive Design */



/* Hero Section - Mobile optimized */
.hero[b-sr9qz5mzdd] {
    background: linear-gradient(135deg, var(--lv-background-primary), var(--lv-background-secondary));
    border-bottom: 1px solid var(--lv-border-primary);
    text-align: center;
    flex-shrink: 0;
    border-radius: 8px 8px 0px 0px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 15px 10px; /* Smaller padding for mobile */
}

.hero-title[b-sr9qz5mzdd] {
    font-family: var(--lv-font-heading);
    color: var(--lv-text-primary);
    margin: 0 0 10px 0; /* Smaller margin */
    font-weight: 700;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* Smaller gap */
    font-size: 1.2rem; /* Smaller title for mobile */
}


/* Desktop hero styles */
@media (min-width: 768px) {
    .hero[b-sr9qz5mzdd] {
        padding: 20px;
        border-radius: 10px 10px 0px 0px;
    }

    .hero-title[b-sr9qz5mzdd] {
        font-size: 1.5rem;
        gap: 1rem;
        margin: 0 0 calc(var(--lv-spacing-unit) * 1.5) 0;
    }

}



/* make the page root fill the screen */
.page-root[b-sr9qz5mzdd] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* this is the one causing the extra scroll right now */
.content[b-sr9qz5mzdd] {
    padding-top: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    /* ❌ remove this, it’s the culprit */
    /* min-height: 100vh; */
    min-height: 0; /* or just omit min-height entirely */
    overflow: visible; /* so it won’t force weird scrolling */
    background: linear-gradient(135deg, var(--lv-background-primary), var(--lv-background-secondary));
}





/* Results Area */
.results-area[b-sr9qz5mzdd] {
    flex-grow: 1;
    padding: calc(var(--lv-spacing-unit) * 3);
    background-color: var(--lv-background-secondary);
    display: flex;
    flex-direction: column;
    overflow-y: visible;
    overflow-x: hidden;
}

/* Alert Message */
.alert-message[b-sr9qz5mzdd] {
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.05));
    color: #fca5a5;
    text-align: center;
    padding: calc(var(--lv-spacing-unit) * 3);
    border-radius: var(--lv-border-radius);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.1);
    font-weight: 500;
    backdrop-filter: blur(10px);
}

/* Table Styles - Mobile Optimized */
.table-card[b-sr9qz5mzdd] {
    flex: 1;
    background: linear-gradient(145deg, var(--lv-background-primary), var(--lv-background-secondary));
    border: 1px solid var(--lv-border-primary);
    border-radius: 6px; /* Smaller border radius for mobile */
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease; /* Faster transition */
}

    .table-card:hover[b-sr9qz5mzdd] {
        transform: translateY(-1px); /* Smaller transform for mobile */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

.table-header[b-sr9qz5mzdd] {
    padding: 10px; /* Much smaller padding for mobile */
    background: linear-gradient(135deg, #f9fafb, #ffffff);
    border-bottom: 1px solid var(--lv-border-primary);
    display: flex;
    flex-direction: column; /* Stack vertically on mobile */
    gap: 8px;
    flex-shrink: 0;
}

    .table-header h3[b-sr9qz5mzdd] {
        margin: 0;
        font-size: 1rem; /* Smaller title for mobile */
        font-weight: 700;
        color: var(--lv-text-primary);
        letter-spacing: -0.01em;
    }

.table-stats[b-sr9qz5mzdd] {
    display: flex;
    gap: 0.5rem; /* Smaller gap */
    align-items: center;
    flex-wrap: wrap;
}

.stat-item[b-sr9qz5mzdd] {
    font-size: 10px; /* Much smaller stats for mobile */
    color: var(--lv-text-secondary);
    font-weight: 500;
}

.table-header-controls[b-sr9qz5mzdd] {
    display: flex;
    flex-direction: column; /* Stack vertically on mobile */
    align-items: stretch;
    gap: 8px;
    margin-top: 0;
}

.table-actions[b-sr9qz5mzdd] {
    padding: 8px 10px; /* Much smaller padding */
    background: linear-gradient(145deg, #f8fafc, #f1f5f9);
    border-bottom: 1px solid var(--lv-border-secondary);
    display: flex;
    justify-content: center; /* Center on mobile */
    align-items: center;
}

.table-wrapper[b-sr9qz5mzdd] {
    flex-grow: 1;
    overflow-x: auto; /* Only horizontal scroll on mobile */
    overflow-y: visible; /* Prevent vertical scroll issues */
    display: block;
    border-radius: 0 0 6px 6px; /* Smaller border radius */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Desktop table styles */
@media (min-width: 768px) {
    .table-card[b-sr9qz5mzdd] {
        border-radius: var(--lv-border-radius);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
    }

        .table-card:hover[b-sr9qz5mzdd] {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.2);
        }

    .table-header[b-sr9qz5mzdd] {
        padding: calc(var(--lv-spacing-unit) * 2);
        flex-direction: row;
        justify-content: space-between;
        gap: 0;
    }

        .table-header h3[b-sr9qz5mzdd] {
            font-size: var(--lv-font-size-large);
        }

    .table-stats[b-sr9qz5mzdd] {
        gap: 1rem;
    }

    .stat-item[b-sr9qz5mzdd] {
        font-size: var(--lv-font-size-small);
    }

    .table-header-controls[b-sr9qz5mzdd] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: calc(var(--lv-spacing-unit) * 2);
        margin-top: calc(var(--lv-spacing-unit) * 1);
    }

    .table-actions[b-sr9qz5mzdd] {
        padding: calc(var(--lv-spacing-unit) * 1.5) calc(var(--lv-spacing-unit) * 2);
        justify-content: flex-end;
    }

    .table-wrapper[b-sr9qz5mzdd] {
        border-radius: 0 0 var(--lv-border-radius) var(--lv-border-radius);
        overflow: auto;
    }
}

.sales-analytics-table[b-sr9qz5mzdd] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--lv-font-main);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border-radius: 6px; /* Smaller border radius for mobile */
    overflow: hidden;
    border: 1px solid rgba(99, 102, 241, 0.2);
    min-width: 1000px; /* Ensure table doesn't get too cramped */
}

    .sales-analytics-table th[b-sr9qz5mzdd], .sales-analytics-table td[b-sr9qz5mzdd] {
        padding: 6px 8px; /* Much smaller padding for mobile */
        border: none;
        font-size: 10px; /* Much smaller font for mobile */
        border-bottom: 1px solid var(--lv-border-secondary);
        text-align: left;
        vertical-align: middle;
        color: var(--lv-text-primary);
        white-space: nowrap; /* Prevent text wrapping */
    }

    .sales-analytics-table th[b-sr9qz5mzdd] {
        position: relative;
        background: linear-gradient(145deg, var(--lv-background-accent), var(--lv-hover-accent));
        color: var(--lv-text-inverted);
        font-size: 9px; /* Much smaller header font for mobile */
        font-weight: 700;
        letter-spacing: 0.02em; /* Tighter letter spacing */
        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; /* Ensure minimum column width */
    }

/* Desktop table styles */
@media (min-width: 768px) {
    .sales-analytics-table[b-sr9qz5mzdd] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-radius: var(--lv-border-radius);
        min-width: auto;
    }

        .sales-analytics-table th[b-sr9qz5mzdd], .sales-analytics-table td[b-sr9qz5mzdd] {
            padding: calc(var(--lv-spacing-unit) * 1.5) calc(var(--lv-spacing-unit) * 1.2);
            font-size: 13px;
            white-space: normal; /* Allow text wrapping on desktop */
        }

        .sales-analytics-table th[b-sr9qz5mzdd] {
            font-size: 11px;
            letter-spacing: 0.03em;
            min-width: auto;
        }
}

.sales-analytics-table tbody tr[b-sr9qz5mzdd] {
    transition: all 0.2s ease;
    background-color: white;
}

    .sales-analytics-table tbody tr:nth-child(even)[b-sr9qz5mzdd] {
        background-color: rgba(248, 250, 252, 0.6);
    }

    .sales-analytics-table tbody tr:hover[b-sr9qz5mzdd] {
        background: linear-gradient(145deg, var(--lv-hover-background), #f3f4f6);
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.05); /* Smaller shadow for mobile */
        transform: translateY(-1px);
    }

    .sales-analytics-table tbody tr:last-child td[b-sr9qz5mzdd] {
        border-bottom: none;
    }

/* Sortable Headers */
.sortable[b-sr9qz5mzdd] {
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

th.sortable[b-sr9qz5mzdd] {
    white-space: nowrap; /* keep header on one line */
}

    th.sortable .sort-indicator[b-sr9qz5mzdd] {
        display: inline-flex; /* keep arrow aligned with text */
        align-items: center;
        margin-left: .25rem; /* small gap */
        vertical-align: middle;
    }

.sort-indicator[b-sr9qz5mzdd] {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.sortable:hover .sort-indicator[b-sr9qz5mzdd] {
    opacity: 1;
}

/* Cell Specific Styles - Mobile Optimized */
.category-cell[b-sr9qz5mzdd] {
    min-width: 120px;
}

.category-name[b-sr9qz5mzdd] {
    font-weight: 600;
    color: var(--lv-text-primary);
}

.item-name-cell[b-sr9qz5mzdd] {
    min-width: 150px;
}

.item-name[b-sr9qz5mzdd] {
    font-weight: 500;
    color: var(--lv-text-primary);
}

.sku-cell[b-sr9qz5mzdd] {
    min-width: 100px;
}

.sku-code[b-sr9qz5mzdd] {
    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);
}

.brand-cell[b-sr9qz5mzdd], .series1-cell[b-sr9qz5mzdd], .series2-cell[b-sr9qz5mzdd] {
    min-width: 100px;
}

.brand-name[b-sr9qz5mzdd], .series-code[b-sr9qz5mzdd] {
    font-weight: 500;
    color: var(--lv-text-secondary);
}

.size-cell[b-sr9qz5mzdd], .unit-cell[b-sr9qz5mzdd] {
    min-width: 80px;
    text-align: center;
}

.size-value[b-sr9qz5mzdd], .unit-value[b-sr9qz5mzdd] {
    font-weight: 500;
    color: var(--lv-text-primary);
}

/* Desktop cell styles */
@media (min-width: 768px) {
    .category-cell[b-sr9qz5mzdd] {
        min-width: 140px;
    }

    .item-name-cell[b-sr9qz5mzdd] {
        min-width: 200px;
    }

    .sku-cell[b-sr9qz5mzdd] {
        min-width: 120px;
    }

    .brand-cell[b-sr9qz5mzdd], .series1-cell[b-sr9qz5mzdd], .series2-cell[b-sr9qz5mzdd] {
        min-width: 120px;
    }

    .size-cell[b-sr9qz5mzdd], .unit-cell[b-sr9qz5mzdd] {
        min-width: 100px;
    }
}

/* Filter Controls - Mobile First Design */
.filter-controls[b-sr9qz5mzdd] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--lv-spacing-unit) * 1);
    padding: calc(var(--lv-spacing-unit) * 1.5);
    border-radius: var(--lv-border-radius);
    margin-bottom: calc(var(--lv-spacing-unit) * 2);
    background: var(--lv-background-primary);
    border: 1px solid var(--lv-border-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.filter-button-container[b-sr9qz5mzdd] {
    display: flex;
    justify-content: center;
}

.filter-summary-container[b-sr9qz5mzdd] {
    display: flex;
    justify-content: center;
}


/* Desktop filter styles */
@media (min-width: 768px) {
    .filter-controls[b-sr9qz5mzdd] {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: calc(var(--lv-spacing-unit) * 3);
        padding: calc(var(--lv-spacing-unit) * 2);
    }
    
    .filter-button-container[b-sr9qz5mzdd] {
        display: flex;
        justify-content: center;
    }
    
    .filter-summary-container[b-sr9qz5mzdd] {
        display: flex;
        justify-content: center;
    }
}


@keyframes dropdownSlide-b-sr9qz5mzdd {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

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


.custom-checkbox[b-sr9qz5mzdd] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px; /* Smaller checkbox for mobile */
    height: 14px;
    border: 1px solid #d1d5db;
    border-radius: 3px; /* Smaller border radius */
    cursor: pointer;
    position: relative;
    outline: none;
    flex-shrink: 0;
    background: linear-gradient(145deg, var(--lv-background-primary), var(--lv-hover-background));
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    z-index: 10001;
}

    .custom-checkbox:hover[b-sr9qz5mzdd] {
        border-color: var(--lv-background-accent);
        transform: scale(1.05);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    }

    .custom-checkbox:checked[b-sr9qz5mzdd] {
        background: linear-gradient(145deg, var(--lv-background-accent), #333333);
        border-color: var(--lv-background-accent);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

        .custom-checkbox:checked[b-sr9qz5mzdd]::after {
            content: '';
            position: absolute;
            left: 4px; /* Adjusted for smaller checkbox */
            top: 1px;
            width: 3px; /* Smaller checkmark */
            height: 6px;
            border: solid var(--lv-text-inverted);
            border-width: 0 1.5px 1.5px 0;
            transform: rotate(45deg);
        }

.checkbox-label[b-sr9qz5mzdd] {
    font-size: 10px; /* Much smaller label for mobile */
    color: var(--lv-text-primary);
    cursor: pointer;
    user-select: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

    .checkbox-label:hover[b-sr9qz5mzdd] {
        color: var(--lv-background-accent);
    }

/* Desktop checkbox styles */
@media (min-width: 768px) {
    .custom-checkbox[b-sr9qz5mzdd] {
        width: 18px;
        height: 18px;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

        .custom-checkbox:checked[b-sr9qz5mzdd]::after {
            left: 5px;
            top: 2px;
            width: 4px;
            height: 8px;
            border-width: 0 2px 2px 0;
        }

    .checkbox-label[b-sr9qz5mzdd] {
        font-size: var(--lv-font-size-base);
    }
}

.dropdown-overlay[b-sr9qz5mzdd] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    z-index: 4999;
}

/* Additional mobile optimizations */
@media (max-width: 767px) {
    .content[b-sr9qz5mzdd] {
        overflow: visible !important;
        flex-grow: 1;
    }

    .results-area[b-sr9qz5mzdd] {
        padding: 0px !important;
    }

    .table-wrapper[b-sr9qz5mzdd] {
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        max-height: 70vh !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 15px !important;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) !important;
        border-radius: 6px !important;
    }

    .sales-analytics-table[b-sr9qz5mzdd] {
        min-width: 1000px !important;
        width: auto !important;
        table-layout: fixed !important;
    }

        .sales-analytics-table th[b-sr9qz5mzdd] {
            white-space: nowrap !important;
            position: sticky !important;
            top: 0 !important;
            z-index: 20 !important;
            font-size: 9px !important;
            padding: 6px 8px !important;
        }

        .sales-analytics-table td[b-sr9qz5mzdd] {
            font-size: 10px !important;
            white-space: nowrap !important;
            padding: 6px 8px !important;
        }

    .filter-modal[b-sr9qz5mzdd]{
        position: fixed;
        top: 5rem;
        bottom: 0;
        left:0px;
        font-size:11px;
        max-width: 90vw;
        background: var(--lv-background-primary);
        box-shadow: 0 10px 40px rgba(0, 0, 0, .15);
        z-index: 1000;
        display: flex;
        flex-direction: column;
    }

    .filter-overlay[b-sr9qz5mzdd] {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 220px; /* ← anchor after sidebar */
        background: rgba(0,0,0,.25);
        z-index: 999;
        opacity: 0;
        animation: fadeInOverlay-b-sr9qz5mzdd .18s ease-out forwards;
        will-change: opacity;
    }
}

/* Export Button Styles */
.export-btn[b-sr9qz5mzdd] {
    background: linear-gradient(145deg, #000000, #1a1a1a);
    color: white;
    border: 2px solid transparent;
    padding: calc(var(--lv-spacing-unit) * 1) calc(var(--lv-spacing-unit) * 1.5);
    border-radius: var(--lv-border-radius);
    cursor: pointer;
    font-size: var(--lv-font-size-small);
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

    .export-btn[b-sr9qz5mzdd]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s ease;
    }

    .export-btn:hover[b-sr9qz5mzdd]::before {
        left: 100%;
    }

    .export-btn:hover[b-sr9qz5mzdd] {
        background: linear-gradient(145deg, rgba(34, 197, 94, 0.8), #000000);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(34, 197, 94, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

/* Loading State Styles */
.loading-container[b-sr9qz5mzdd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    min-height: 300px;
    text-align: center;
}

    .loading-container p[b-sr9qz5mzdd] {
        color: var(--lv-text-secondary);
        font-size: 1rem;
        margin-top: 1rem;
        margin-bottom: 0;
    }

.loading-spinner[b-sr9qz5mzdd] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--lv-border-secondary);
    border-top: 4px solid var(--lv-background-accent);
    border-radius: 50%;
    animation: spin-b-sr9qz5mzdd 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin-b-sr9qz5mzdd {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Alert Banner Styles */
.alert-banner[b-sr9qz5mzdd] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem 1rem;
    margin: 0 0 1rem 0;
    border: 1px solid #fdba74;
    background: #fff7ed;
    color: #9a3412;
    border-radius: var(--lv-border-radius);
}

    .alert-banner .close[b-sr9qz5mzdd] {
        margin-left: auto;
        background: none;
        border: 0;
        cursor: pointer;
        font-size: 1.1rem;
        line-height: 1;
        color: inherit;
    }

    .alert-banner svg[b-sr9qz5mzdd] {
        flex: 0 0 auto;
        margin-top: 2px;
    }

/* Table Footer & Pagination */
.table-footer[b-sr9qz5mzdd] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    background: linear-gradient(145deg, #f8fafc, #f1f5f9);
    border-top: 1px solid var(--lv-border-secondary);
    flex-shrink: 0;
    margin-top: 0;
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    z-index: 10;
}

.pagination-info[b-sr9qz5mzdd] {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .pagination-info p[b-sr9qz5mzdd] {
        margin: 0;
        color: var(--lv-text-secondary);
        font-size: 15px;
        font-weight: 500;
        text-align: center;
    }

.pagination-controls[b-sr9qz5mzdd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}

.lv-pagination-btn[b-sr9qz5mzdd] {
    padding: 4px 6px;
    border: 1px solid var(--lv-border-primary);
    border-radius: 3px;
    background: linear-gradient(145deg, var(--lv-background-primary), var(--lv-hover-background));
    color: var(--lv-text-primary);
    cursor: pointer;
    font-size: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    min-width: 20px;
    height: 20px;
}

    .lv-pagination-btn:hover:not(.disabled)[b-sr9qz5mzdd] {
        background: linear-gradient(145deg, var(--lv-hover-background), var(--lv-background-secondary));
        border-color: var(--lv-background-accent);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .lv-pagination-btn:active:not(.disabled)[b-sr9qz5mzdd] {
        transform: translateY(0);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .lv-pagination-btn.disabled[b-sr9qz5mzdd] {
        opacity: 0.5;
        cursor: not-allowed;
        background: rgba(255, 255, 255, 0.5);
    }

    .lv-pagination-btn.active[b-sr9qz5mzdd] {
        background: linear-gradient(145deg, var(--lv-background-accent), #333333);
        color: var(--lv-text-inverted);
        border-color: var(--lv-background-accent);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

.lv-page-number[b-sr9qz5mzdd] {
    min-width: 36px;
}

/* Desktop pagination styles */
@media (min-width: 768px) {
    .table-footer[b-sr9qz5mzdd] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: calc(var(--lv-spacing-unit) * 2);
        gap: 0;
        margin-top: calc(var(--lv-spacing-unit) * 2);
        position: relative;
    }

    .filter-overlay[b-sr9qz5mzdd] {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 220px; /* ← anchor after sidebar */
        background: rgba(0,0,0,.25);
        z-index: 999;
        opacity: 0;
        animation: fadeInOverlay-b-sr9qz5mzdd .18s ease-out forwards;
        will-change: opacity;
    }

    /* Modal anchored after the sidebar */
    .filter-modal[b-sr9qz5mzdd] {
        position: fixed;
        top: 5rem;
        bottom: 0;
        left: 220px; /* ← anchor after sidebar */
        width: 80vh;
        max-width: calc(100vw - 220px); /* never overflow viewport */
        background: var(--lv-background-primary);
        box-shadow: 0 10px 40px rgba(0,0,0,.15);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        will-change: transform, opacity;
    }

    .pagination-controls[b-sr9qz5mzdd] {
        justify-content: flex-end;
        gap: calc(var(--lv-spacing-unit) * 0.5);
        flex-wrap: nowrap;
    }

    .lv-pagination-btn[b-sr9qz5mzdd] {
        padding: calc(var(--lv-spacing-unit) * 0.75) calc(var(--lv-spacing-unit) * 1);
        border-radius: var(--lv-border-radius-small);
        font-size: var(--lv-font-size-small);
        min-width: auto;
        height: auto;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
}

/* Animations */
@keyframes heroGlow-b-sr9qz5mzdd {
    0% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    100% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

@keyframes iconFloat-b-sr9qz5mzdd {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes dropdownSlide-b-sr9qz5mzdd {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

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

@keyframes spin-b-sr9qz5mzdd {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Scrollbar Styling */
.filter-dropdown-menu[b-sr9qz5mzdd]::-webkit-scrollbar {
    width: 4px;
}

.filter-dropdown-menu[b-sr9qz5mzdd]::-webkit-scrollbar-track {
    background: rgba(99, 102, 241, 0.1);
    border-radius: 2px;
}

.filter-dropdown-menu[b-sr9qz5mzdd]::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.5);
    border-radius: 2px;
}

    .filter-dropdown-menu[b-sr9qz5mzdd]::-webkit-scrollbar-thumb:hover {
        background: rgba(99, 102, 241, 0.8);
    }

.table-wrapper[b-sr9qz5mzdd]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.table-wrapper[b-sr9qz5mzdd]::-webkit-scrollbar-track {
    background: rgba(99, 102, 241, 0.1);
    border-radius: 3px;
}

.table-wrapper[b-sr9qz5mzdd]::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.5);
    border-radius: 3px;
    transition: background 0.3s ease;
}

    .table-wrapper[b-sr9qz5mzdd]::-webkit-scrollbar-thumb:hover {
        background: rgba(99, 102, 241, 0.8);
    }

.open-filter-btn[b-sr9qz5mzdd] {
    display: flex;
    align-items: center;
    gap: calc(var(--lv-spacing-unit) * 0.5);
    padding: 0.8rem;
    background: #ffffff;
    color: #000000;
    border: none;
    border-radius: var(--lv-border-radius-small);
    cursor: pointer;
    font-size: var(--lv-font-size-small);
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    height: fit-content;
}
.open-filter-btn:hover[b-sr9qz5mzdd] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.open-filter-btn:active[b-sr9qz5mzdd] {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.selected-summary[b-sr9qz5mzdd] {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--lv-spacing-unit) * 0.5);
    font-size: var(--lv-font-size-small);
    color: #000000;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--lv-border-primary);
    background: #ffffff;
    align-items: center;
    justify-content: center;
}

.selected-summary span[b-sr9qz5mzdd] {
    color: black;
}

/* Overlay should respect the 220px sidebar */


/* Smooth slide-in from the left edge of content area (not screen) */
.slide-in-left[b-sr9qz5mzdd] {
    animation: slideInFromContent-b-sr9qz5mzdd .22s ease-out forwards;
}

@keyframes fadeInOverlay-b-sr9qz5mzdd {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Start slightly left of its final spot within the content area */
@keyframes slideInFromContent-b-sr9qz5mzdd {
    from { transform: translateX(-16px); opacity: 0; }
    to   { transform: translateX(0);      opacity: 1; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .filter-overlay[b-sr9qz5mzdd],
    .slide-in-left[b-sr9qz5mzdd] { animation: none; opacity: 1; transform: none; }
}

.filter-modal-header[b-sr9qz5mzdd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--lv-border-primary);
}

.close-btn[b-sr9qz5mzdd] {
    background: transparent;
    border: none;
    font-size: 16px;
    cursor: pointer;
}


.filter-modal-footer[b-sr9qz5mzdd] {
    margin-top: auto;
    padding: 12px 16px;
    border-top: 1px solid var(--lv-border-secondary);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}


.clear-all-filters-btn[b-sr9qz5mzdd] {
    background: var(--lv-background-primary);
    color: var(--lv-text-primary);
    border: 1px solid var(--lv-border-primary);
    font-weight: 700;
    border-radius: 10px;
    font-size: 12px;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.clear-all-filters-btn:hover:not(:disabled)[b-sr9qz5mzdd] {
    transform: translateY(-1px);
    border-color: var(--lv-text-primary);
    background: var(--lv-hover-background);
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.apply-btn[b-sr9qz5mzdd] {
    background: linear-gradient(145deg, var(--lv-background-accent), var(--lv-hover-accent));
    color: var(--lv-text-inverted);
    border-color: var(--lv-background-accent);
    font-weight: 700;
    border-radius: 10px;
    font-size: 12px;
    padding: 0.5rem;
}

.apply-btn:hover:not(:disabled)[b-sr9qz5mzdd] {
    transform: translateY(-1px);
    border-color: var(--lv-hover-accent);
    background: linear-gradient(145deg, var(--lv-hover-accent), var(--lv-background-accent));
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}


/* Additional filters container */
.additional-filters[b-sr9qz5mzdd] {
    display: flex;
    padding-top:1rem;
    gap: calc(var(--lv-spacing-unit) * 2);
    margin-bottom: calc(var(--lv-spacing-unit) * 2);
    flex-wrap: wrap;
    justify-content:center;
}

/* Filter button containers */
.market-filter-container[b-sr9qz5mzdd] {
    position: relative;
}

/* Filter buttons */
.market-filter-btn[b-sr9qz5mzdd] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px;
    border: 1px solid var(--lv-border-primary);
    border-radius: var(--lv-border-radius-small);
    background: linear-gradient(145deg, var(--lv-background-primary), var(--lv-hover-background));
    color: var(--lv-text-primary);
    font-size: var(--lv-font-size-base);
    font-weight: 600;
    cursor: pointer;
    min-width:300px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
    will-change: transform, box-shadow;
}

.date-filter-btn:hover[b-sr9qz5mzdd],
.market-filter-btn:hover[b-sr9qz5mzdd] {
    transform: translateY(-1px);
    background: linear-gradient(145deg, var(--lv-hover-background), var(--lv-background-secondary));
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}


/* Footer left-aligned + spacer to push refresh right */
.filter-modal-footer.footer-left[b-sr9qz5mzdd] {
    justify-content: flex-start;
    align-items: center;
}

/* Smart Filter Container */
.smart-filter-container[b-sr9qz5mzdd] {
    display: flex;
    flex-direction: column;
    height: 70vh;
    max-height: 70vh;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Filter Tabs */
.filter-tabs[b-sr9qz5mzdd] {
    display: flex;
    background: #f8fafc;
    border-radius: 12px;
    padding: 4px;
    overflow-x: auto;
    flex-shrink: 0;
    gap: 4px;
}

.filter-tab[b-sr9qz5mzdd] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    border-radius: 8px;
    text-align: center;
}

.filter-tab:hover[b-sr9qz5mzdd] {
    background: #e2e8f0;
    color: #334155;
}

.filter-tab.active[b-sr9qz5mzdd] {
    background: #ffffff;
    color: #1e293b;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Filter Content */
.filter-content[b-sr9qz5mzdd] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    overflow: hidden;
    background: #ffffff;
}

/* Search Box Container */
.filter-search-container[b-sr9qz5mzdd] {
    margin-bottom: calc(var(--lv-spacing-unit) * 2);
    flex-shrink: 0;
    background: var(--lv-background-primary);
    border: 1px solid var(--lv-border-primary);
    border-radius: var(--lv-border-radius);
    padding: calc(var(--lv-spacing-unit) * 1.5);
}

/* Mobile: Search input and actions stacked */
.search-input-row[b-sr9qz5mzdd] {
    margin-bottom: calc(var(--lv-spacing-unit) * 1.5);
}

.search-actions-row[b-sr9qz5mzdd] {
    display: flex;
    justify-content: center;
}

.search-input[b-sr9qz5mzdd] {
    width: 100%;
    padding: calc(var(--lv-spacing-unit) * 1.25) calc(var(--lv-spacing-unit) * 1.5);
    border: 1px solid var(--lv-border-primary);
    border-radius: var(--lv-border-radius-small);
    font-size: var(--lv-font-size-base);
    background: var(--lv-background-primary);
    color: var(--lv-text-primary);
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.search-input:focus[b-sr9qz5mzdd] {
    outline: none;
    border-color: var(--lv-background-accent);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.search-input[b-sr9qz5mzdd]::placeholder {
    color: var(--lv-text-disabled);
}

.search-actions[b-sr9qz5mzdd] {
    display: flex;
    gap: calc(var(--lv-spacing-unit) * 1);
    justify-content: center;
}

/* Desktop: Put search and actions on same row */
@media (min-width: 768px) {
    .filter-search-container[b-sr9qz5mzdd] {
        display: flex;
        gap: calc(var(--lv-spacing-unit) * 1.5);
        align-items: flex-start;
        padding: calc(var(--lv-spacing-unit) * 2);
    }
    
    .search-input-row[b-sr9qz5mzdd] {
        flex: 1;
        margin-bottom: 0;
    }
    
    .search-actions-row[b-sr9qz5mzdd] {
        flex-shrink: 0;
        display: flex;
        align-items: flex-start;
    }
    
    .search-actions[b-sr9qz5mzdd] {
        justify-content: flex-end;
    }
}

.action-btn[b-sr9qz5mzdd] {
    padding: calc(var(--lv-spacing-unit) * 1) calc(var(--lv-spacing-unit) * 1.75);
    font-size: var(--lv-font-size-base);
    font-weight: 500;
    border: 1px solid var(--lv-border-primary);
    background: var(--lv-background-primary);
    color: var(--lv-text-primary);
    border-radius: var(--lv-border-radius-small);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.action-btn:hover[b-sr9qz5mzdd] {
    background: var(--lv-hover-background);
    border-color: var(--lv-text-disabled);
    color: var(--lv-text-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.action-btn:active[b-sr9qz5mzdd] {
    background: var(--lv-background-secondary);
    transform: translateY(1px);
}

/* Compact Options Grid */
.compact-options-grid[b-sr9qz5mzdd] {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: calc(var(--lv-spacing-unit) * 1);
    padding: calc(var(--lv-spacing-unit) * 1.5) 0;
}

.compact-option-chip[b-sr9qz5mzdd] {
    display: flex;
    align-items: center;
    gap: calc(var(--lv-spacing-unit) * 1);
    padding: calc(var(--lv-spacing-unit) * 1.25) calc(var(--lv-spacing-unit) * 1.5);
    border: 1px solid var(--lv-border-primary);
    border-radius: var(--lv-border-radius-small);
    background: var(--lv-background-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--lv-font-size-base);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.compact-option-chip:hover[b-sr9qz5mzdd] {
    background: var(--lv-hover-background);
    border-color: var(--lv-border-secondary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .compact-option-chip.selected[b-sr9qz5mzdd] {
        background: #ffffff;
        color: #000000;
        border-color: var(--lv-background-accent);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

.compact-option-chip input[type="checkbox"][b-sr9qz5mzdd] {
    margin: 0;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--lv-background-accent);
}

.compact-option-chip span[b-sr9qz5mzdd] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selected-items[b-sr9qz5mzdd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.selected-item[b-sr9qz5mzdd] {
    display: inline-flex;
    background: #fbfcfc;
    align-items: center;
    gap: 0.25rem;
    color: #000000;
    border-radius: 4px;
    padding: 0.25rem;
    border: 1px solid #0000001c;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.more-items[b-sr9qz5mzdd] {
    padding: 0.25rem 0.5rem;
    background: var(--lv-border-primary);
    color: var(--lv-text-secondary);
    border-radius: 4px;
    font-size: 0.75rem;
}

.no-options[b-sr9qz5mzdd] {
    color: var(--lv-text-secondary);
    font-style: italic;
    text-align: center;
    padding: calc(var(--lv-spacing-unit) * 4) calc(var(--lv-spacing-unit) * 3);
    background: var(--lv-hover-background);
    border-radius: var(--lv-border-radius);
    margin: calc(var(--lv-spacing-unit) * 1.5) 0;
    border: 1px dashed var(--lv-border-primary);
}


/* Date and Market Filter Styles */
.date-filter-overlay[b-sr9qz5mzdd], .market-filter-overlay[b-sr9qz5mzdd] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

.date-filter-dropdown[b-sr9qz5mzdd], .market-filter-dropdown[b-sr9qz5mzdd] {
    position: absolute;
    top: 100%;
    left: 0;
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.95),
        rgba(255, 255, 255, 0.85)
    );
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--lv-border-radius);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 10000;
    min-width: 220px;
    margin-top: 6px;
    overflow: hidden;
    animation: dropdownSlideIn-b-sr9qz5mzdd 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dropdownSlideIn-b-sr9qz5mzdd {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.95);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.date-filter-item[b-sr9qz5mzdd], .market-filter-item[b-sr9qz5mzdd] {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--lv-text-primary);
    display: flex;
    align-items: center;
    gap: calc(var(--lv-spacing-unit) * 0.75);
    font-size: calc(var(--lv-font-size-base) * 0.875);
    font-weight: 500;
    letter-spacing: 0.025em;
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
    border-radius: 0;
    margin: 0 2px;
    min-width: 300px;
    border-left: 2px solid transparent;
}

.date-filter-item:hover[b-sr9qz5mzdd], .market-filter-item:hover[b-sr9qz5mzdd] {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.05),
        rgba(255, 255, 255, 0.02)
    );
    border-left-color: var(--lv-background-accent);
    color: var(--lv-background-accent);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.date-filter-item:active[b-sr9qz5mzdd], .market-filter-item:active[b-sr9qz5mzdd] {
    transform: translateX(2px) scale(0.98);
    transition-duration: 0.1s;
}

.date-filter-item:first-child[b-sr9qz5mzdd], .market-filter-item:first-child[b-sr9qz5mzdd] {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-top-left-radius: var(--lv-border-radius-small);
    border-top-right-radius: var(--lv-border-radius-small);
}

.date-filter-item:last-child[b-sr9qz5mzdd], .market-filter-item:last-child[b-sr9qz5mzdd] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom-left-radius: var(--lv-border-radius-small);
    border-bottom-right-radius: var(--lv-border-radius-small);
}

/* Add subtle glow effect on hover */
.date-filter-item:hover[b-sr9qz5mzdd]::before, .market-filter-item:hover[b-sr9qz5mzdd]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.03),
        rgba(255, 255, 255, 0.01)
    );
    border-radius: var(--lv-border-radius-small);
    z-index: -1;
    opacity: 0;
    animation: glowIn-b-sr9qz5mzdd 0.3s ease-out forwards;
}

@keyframes glowIn-b-sr9qz5mzdd {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.market-filter-item img[b-sr9qz5mzdd] {
    width: 18px;
    height: 14px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.market-filter-item:hover img[b-sr9qz5mzdd] {
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.market-filter-item input[type="checkbox"][b-sr9qz5mzdd] {
    margin: 0;
    width: 14px;
    height: 14px;
    accent-color: var(--lv-background-accent);
    border-radius: 3px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.market-filter-item input[type="checkbox"]:hover[b-sr9qz5mzdd] {
    transform: scale(1.1);
}

.refresh-btn[b-sr9qz5mzdd] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 6px 10px;
    border: 1px solid var(--lv-border-primary);
    border-radius: var(--lv-border-radius);
    background: linear-gradient(145deg, var(--lv-background-primary), var(--lv-background-secondary));
    color: var(--lv-text-primary);
    cursor: pointer;
    font-weight: 600;
    font-size: var(--lv-font-size-small);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.refresh-btn:hover[b-sr9qz5mzdd] {
    transform: translateY(-1px) rotate(0.0001deg); /* GPU hint */
    border-color: var(--lv-background-accent);
    background: linear-gradient(145deg, var(--lv-hover-background), var(--lv-background-secondary));
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
}

/* Summary Cards */
.summary-cards[b-sr9qz5mzdd] {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 20px;
    margin-bottom: 30px;
}

.summary-card[b-sr9qz5mzdd], .chart-card[b-sr9qz5mzdd] {
    background: white;
    border-radius: var(--lv-border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.card-header[b-sr9qz5mzdd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--lv-border-secondary);
    background: var(--lv-background-secondary);
}

.card-header h3[b-sr9qz5mzdd] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--lv-text-primary);
}

.card-icon[b-sr9qz5mzdd] {
    font-size: 20px;
}

.card-content[b-sr9qz5mzdd] {
    padding: 20px;
}

/* Market Sales Styles */
.market-sales-list[b-sr9qz5mzdd] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.market-sale-item[b-sr9qz5mzdd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--lv-border-secondary);
}

.market-sale-item:last-child[b-sr9qz5mzdd] {
    border-bottom: none;
}

.market-name[b-sr9qz5mzdd] {
    font-weight: 500;
    color: var(--lv-text-primary);
}

.market-value[b-sr9qz5mzdd] {
    font-weight: 600;
    color: var(--lv-text-primary);
}

.market-change[b-sr9qz5mzdd] {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
}

.market-change.positive[b-sr9qz5mzdd] {
    background: #dcfce7;
    color: #166534;
}

.market-change.negative[b-sr9qz5mzdd] {
    background: #fef2f2;
    color: #dc2626;
}

/* Top Items Styles */
.view-selector[b-sr9qz5mzdd] {
    display: flex;
    align-items: center;
}

.view-dropdown[b-sr9qz5mzdd] {
    padding: 6px 12px;
    border: 1px solid var(--lv-border-primary);
    border-radius: 6px;
    background: white;
    font-size: 13px;
    color: var(--lv-text-primary);
    cursor: pointer;
}

.top-list[b-sr9qz5mzdd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.top-item[b-sr9qz5mzdd] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.top-name[b-sr9qz5mzdd] {
    flex: 1;
    font-weight: 500;
    color: var(--lv-text-primary);
}

.top-value[b-sr9qz5mzdd] {
    font-weight: 600;
    color: var(--lv-text-primary);
    min-width: 80px;
    text-align: right;
}

.top-bar[b-sr9qz5mzdd] {
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    position: relative;
    min-width: 60px;
}

.top-bar[b-sr9qz5mzdd]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #06b6d4);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Chart Cards */
.chart-cards[b-sr9qz5mzdd] {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 20px;
    margin-bottom: 30px;
}

.chart-container[b-sr9qz5mzdd] {
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile chart improvements */
@media (max-width: 768px) {
    .chart-container[b-sr9qz5mzdd] {
        height: 400px;
    }
}

/* Sales Analytics Charts - Coinbase-style */
.linear-chart[b-sr9qz5mzdd] {
    width: 100%;
    height: 300px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
}

.pie-chart-container[b-sr9qz5mzdd] {
    position: relative;
    width: 100%;
    min-height: 340px;
    overflow: visible; /* important: don't clip the legend */
}

.pie-chart[b-sr9qz5mzdd] {
    display: block;
    width: 100%;
    height: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
    .summary-cards[b-sr9qz5mzdd], .chart-cards[b-sr9qz5mzdd] {
        grid-template-columns: 1fr;
    }

    .pie-chart-container[b-sr9qz5mzdd] {
        padding: 15px;
        height: 200px;
    }

    .pie-chart[b-sr9qz5mzdd] {
        width: 140px;
        height: 140px;
    }
}

/* Chart Tooltip */
#chart-tooltip[b-sr9qz5mzdd] {
    position: fixed;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
    max-width: 250px;
    word-wrap: break-word;
}

/* Enhanced chart interactions */
.pie-chart path[b-sr9qz5mzdd] {
    cursor: pointer;
    transition: all 0.2s ease;
}

.pie-chart path:hover[b-sr9qz5mzdd] {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

.linear-chart circle[b-sr9qz5mzdd] {
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Enhanced Linear Chart Styles */
.linear-chart .data-point[b-sr9qz5mzdd] {
    cursor: pointer;
    transition: all 0.2s ease;
}

.linear-chart .data-point:hover[b-sr9qz5mzdd] {
    fill: #ef4444 !important;
}

.linear-chart .grid-lines[b-sr9qz5mzdd] {
    opacity: 0.5;
}

.linear-chart .grid-lines line:hover[b-sr9qz5mzdd] {
    stroke: #3b82f6;
    opacity: 0.8;
}

/* Chart Title and Labels */
.linear-chart text[b-sr9qz5mzdd] {
    user-select: none;
    pointer-events: none;
}

/* Chart Header Controls */
.chart-header[b-sr9qz5mzdd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--lv-border-secondary);
    background: var(--lv-background-secondary);
}

.chart-header h3[b-sr9qz5mzdd] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--lv-text-primary);
}

.chart-header-controls[b-sr9qz5mzdd] {
    display: flex;
    align-items: center;
    gap: calc(var(--lv-spacing-unit) * 2);
}

.view-toggle-buttons[b-sr9qz5mzdd] {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--lv-border-primary);
    border-radius: var(--lv-border-radius-small);
    background: var(--lv-background-primary);
    padding: 2px;
}

.view-toggle-btn[b-sr9qz5mzdd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: calc(var(--lv-border-radius-small) - 2px);
    background: transparent;
    color: var(--lv-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.view-toggle-btn:hover[b-sr9qz5mzdd] {
    background: var(--lv-hover-background);
    color: var(--lv-text-primary);
}

.view-toggle-btn.active[b-sr9qz5mzdd] {
    background: var(--lv-background-accent);
    color: var(--lv-text-inverted);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.view-toggle-btn svg[b-sr9qz5mzdd] {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

/* Comparison Table Styles */
.comparison-table-wrapper[b-sr9qz5mzdd] {
    overflow-x: auto;
}

.comparison-table[b-sr9qz5mzdd] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--lv-font-size-base);
}

.comparison-table th[b-sr9qz5mzdd],
.comparison-table td[b-sr9qz5mzdd] {
    padding: calc(var(--lv-spacing-unit) * 1.5) calc(var(--lv-spacing-unit) * 2);
    text-align: center;
    border-bottom: 1px solid var(--lv-border-secondary);
}

.comparison-table th[b-sr9qz5mzdd] {
    background: linear-gradient(145deg, var(--lv-background-accent), var(--lv-hover-accent));
    color: var(--lv-text-inverted);
    font-weight: 600;
    font-size: var(--lv-font-size-small);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: sticky;
    top: 0;
}

.comparison-table tbody tr[b-sr9qz5mzdd] {
    transition: background-color 0.2s ease;
}

.comparison-table tbody tr:hover[b-sr9qz5mzdd] {
    background: var(--lv-hover-background);
}

.comparison-table .item-name-cell[b-sr9qz5mzdd] {
    font-weight: 500;
    color: var(--lv-text-primary);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comparison-table .revenue-cell[b-sr9qz5mzdd] {
    font-weight: 600;
    color: var(--lv-text-primary);
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.comparison-table .percentage-cell[b-sr9qz5mzdd] {
    font-weight: 500;
    color: var(--lv-text-secondary);
    text-align: center;
    min-width: 80px;
}

.change-indicator[b-sr9qz5mzdd] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
}

.change-indicator.positive[b-sr9qz5mzdd] {
    background-color: #dcfce7;
    color: #166534;
}

.change-indicator.negative[b-sr9qz5mzdd] {
    background-color: #fef2f2;
    color: #dc2626;
}

.change-indicator:not(.positive):not(.negative)[b-sr9qz5mzdd] {
    background-color: #f3f4f6;
    color: #6b7280;
}

/* Enhanced Tooltip */
#chart-tooltip[b-sr9qz5mzdd] {
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
}

/* Chart Container Enhancements */
.chart-container[b-sr9qz5mzdd] {
    position: relative;
    overflow: visible;
}

.chart-container[b-sr9qz5mzdd]::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(147, 197, 253, 0.02));
    border-radius: 12px;
    z-index: -1;
    pointer-events: none;
}

/* ---------------------------
   Getting Started — Futuristic Style
   --------------------------- */

.getting-started[b-sr9qz5mzdd] {
    font-family: var(--lv-font-main);
    color: var(--lv-text-primary);
    background: radial-gradient(1200px 600px at 10% -10%, rgba(0,0,0,0.04), transparent 40%), radial-gradient(900px 500px at 120% 10%, rgba(0,0,0,0.03), transparent 45%), var(--lv-background-secondary);
    border: 1px solid var(--lv-border-primary);
    border-radius: calc(var(--lv-border-radius) + 4px);
    padding: calc(var(--lv-spacing-unit) * 3);
    position: relative;
    overflow: clip;
    /* glassy feel */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.06), inset 0 0 0 1px rgba(255,255,255,0.5);
}

    /* animated accent frame */
    .getting-started[b-sr9qz5mzdd]::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(120deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0) 65%, rgba(0,0,0,0) 100%) border-box;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) padding-box;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) padding-box;
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        animation: sweep-b-sr9qz5mzdd 3.5s linear infinite;
        pointer-events: none;
    }

.getting-started-content[b-sr9qz5mzdd] {
    max-width: 860px;
    margin: 0 auto;
    display: grid;
    gap: calc(var(--lv-spacing-unit) * 2);
    align-items: start;
}

/* Heading + intro */
.getting-started h2[b-sr9qz5mzdd] {
    margin: 0 0 calc(var(--lv-spacing-unit) * 1.5);
    font-family: var(--lv-font-heading);
    font-size: clamp(20px, 2.4vw, 28px);
    letter-spacing: 0.2px;
    color: var(--lv-text-primary);
}

.getting-started > .getting-started-content > p[b-sr9qz5mzdd] {
    font-size: var(--lv-font-size-base);
}

/* Steps list — timeline grid */
.steps-list[b-sr9qz5mzdd] {
    position: relative;
    display: grid;
    gap: calc(var(--lv-spacing-unit) * 1.25);
    padding-left: calc(var(--lv-spacing-unit) * 0.5);
}

    .steps-list[b-sr9qz5mzdd]::before {
        content: "";
        position: absolute;
        left: 19px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient( to bottom, rgba(0,0,0,0.08), rgba(0,0,0,0.04) 30%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0.04) );
        border-radius: 2px;
    }

/* Each step card */
.step-item[b-sr9qz5mzdd] {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: calc(var(--lv-spacing-unit) * 1.25);
    align-items: start;
    background: linear-gradient( 180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.5) ), var(--lv-background-primary);
    border: 1px solid var(--lv-border-secondary);
    border-radius: var(--lv-border-radius);
    padding: calc(var(--lv-spacing-unit) * 1.25);
    box-shadow: 0 6px 14px rgba(0,0,0,0.05), inset 0 0 0 1px rgba(255,255,255,0.6);
    transform: translateZ(0);
    transition: transform 300ms cubic-bezier(.2,.8,.2,1), box-shadow 300ms ease, border-color 300ms ease;
}

    .step-item:hover[b-sr9qz5mzdd] {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(255,255,255,0.7);
        border-color: var(--lv-border-primary);
    }

/* Numeric pips with accent ring */
.step-number[b-sr9qz5mzdd] {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 13px;
    color: var(--lv-text-inverted);
    background: linear-gradient(135deg, var(--lv-background-accent), var(--lv-hover-accent));
    box-shadow: 0 0 0 3px rgba(0,0,0,0.04), 0 8px 14px rgba(0,0,0,0.15);
    position: relative;
}

    .step-number[b-sr9qz5mzdd]::after {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: inherit;
        background: radial-gradient(35% 35% at 50% 50%, rgba(0,0,0,0.08), transparent 70%);
        filter: blur(6px);
        z-index: -1;
    }

/* Step content */
.step-content h4[b-sr9qz5mzdd] {
    margin: 2px 0 6px;
    font-size: 14px;
    letter-spacing: 0.2px;
    color: var(--lv-text-primary);
}

.step-content p[b-sr9qz5mzdd] {
    margin: 0;
    font-size: var(--lv-font-size-base);
    color: var(--lv-text-secondary);
}

/* Start message / callout */
.start-message[b-sr9qz5mzdd] {
    margin-top: calc(var(--lv-spacing-unit) * 2.5);
    padding: calc(var(--lv-spacing-unit) * 2);
    border-radius: var(--lv-border-radius);
    border: 1px dashed var(--lv-border-primary);
    background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0)), var(--lv-background-primary);
    position: relative;
    overflow: hidden;
}

    .start-message[b-sr9qz5mzdd]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.6) 25%, transparent 50%, transparent 100%);
        mix-blend-mode: soft-light;
        animation: shimmer-b-sr9qz5mzdd 5s ease-in-out infinite;
        pointer-events: none;
    }

    .start-message p[b-sr9qz5mzdd] {
        margin: 0;
        font-size: var(--lv-font-size-base);
        color: var(--lv-text-primary);
    }

/* Subtle entrance animations (stagger via nth-child) */
.step-item[b-sr9qz5mzdd] {
    opacity: 0;
    animation: rise-b-sr9qz5mzdd 700ms cubic-bezier(.2,.8,.2,1) forwards;
}

    .step-item:nth-child(1)[b-sr9qz5mzdd] {
        animation-delay: 80ms;
    }

    .step-item:nth-child(2)[b-sr9qz5mzdd] {
        animation-delay: 180ms;
    }

    .step-item:nth-child(3)[b-sr9qz5mzdd] {
        animation-delay: 280ms;
    }

/* Hover “laser underline” on headings */
.step-content h4[b-sr9qz5mzdd] {
    position: relative;
}

    .step-content h4[b-sr9qz5mzdd]::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -6px;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--lv-background-accent), var(--lv-hover-accent));
        border-radius: 2px;
        transition: width 320ms cubic-bezier(.2,.8,.2,1);
    }

.step-item:hover .step-content h4[b-sr9qz5mzdd]::after {
    width: 64px;
}

/* Accent chips for H2 */
.getting-started h2[b-sr9qz5mzdd]::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: radial-gradient(circle at 50% 50%, var(--lv-background-accent), var(--lv-hover-accent));
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    animation: pulse-b-sr9qz5mzdd 2.6s ease-in-out infinite;
}

/* ---------------------------
   Animations
   --------------------------- */
@keyframes sweep-b-sr9qz5mzdd {
    0% {
        transform: translateX(-20%);
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(20%);
        opacity: 0.5;
    }
}

@keyframes float-b-sr9qz5mzdd {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes rise-b-sr9qz5mzdd {
    0% {
        transform: translateY(8px);
        opacity: 0;
    }

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

@keyframes shimmer-b-sr9qz5mzdd {
    0% {
        transform: translateX(-40%);
        opacity: 0.25;
    }

    50% {
        opacity: 0.35;
    }

    100% {
        transform: translateX(40%);
        opacity: 0.25;
    }
}

@keyframes pulse-b-sr9qz5mzdd {
    0%,100% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.25);
        filter: brightness(1.15);
    }
}

/* Market Selection Alert */
.sales-analytics-alert-market[b-sr9qz5mzdd] {
    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-b-sr9qz5mzdd 0.5s ease-out;
}

@keyframes slideInFromRight-b-sr9qz5mzdd {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ---------------------------
   Accessibility / Motion
   --------------------------- */
@media (prefers-reduced-motion: reduce) {
    .getting-started-icon[b-sr9qz5mzdd],
    .step-item[b-sr9qz5mzdd],
    .start-message[b-sr9qz5mzdd]::before,
    .getting-started[b-sr9qz5mzdd]::before,
    .getting-started h2[b-sr9qz5mzdd]::after {
        animation: none !important;
    }

        .step-item[b-sr9qz5mzdd],
        .step-item:hover[b-sr9qz5mzdd] {
            transform: none !important;
        }
}

.table-header[b-sr9qz5mzdd] {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.table-controls[b-sr9qz5mzdd] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}


/* --- Custom Select (only what's used by your snippet) --- */
.custom-select[b-sr9qz5mzdd] {
    position: relative;
    min-width: 120px;
    max-width: 200px;
    user-select: none;
    width: auto;
    z-index: 100;
}

/* Trigger (button) */
.select-trigger[b-sr9qz5mzdd] {
    position: relative;
    padding: 8px 40px 8px 8px;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #000;
    box-shadow: 0 4px 8px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.05);
    cursor: pointer;
    transition: all .2s ease;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .select-trigger:hover[b-sr9qz5mzdd] {
        border-color: rgba(255,255,255,.3);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.2);
    }
    /* Focus style when anything inside has focus */
    .select-trigger:focus[b-sr9qz5mzdd],
    .custom-select:focus-within .select-trigger[b-sr9qz5mzdd] {
        outline: none;
        border-color: rgba(255,255,255,.5);
        box-shadow: 0 6px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 3px rgba(255,255,255,.15);
        transform: translateY(-1px);
    }

/* When dropdown is open (relies on :has). If you need wider support, add an `.open` class to .custom-select instead. */
.custom-select:has(.select-options) .select-trigger[b-sr9qz5mzdd] {
    border-color: rgba(255,255,255,.5);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 4px 8px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.2);
}

/* Arrow */
.select-arrow[b-sr9qz5mzdd] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #000;
    transition: transform .3s ease, color .3s ease;
    flex-shrink: 0;
}

    .select-arrow.rotated[b-sr9qz5mzdd] {
        transform: rotate(180deg);
        color: rgb(59 52 52 / 80%);
    }

/* Options panel */
.select-options[b-sr9qz5mzdd] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    z-index: 1000;
    max-height: 300px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: all .2s ease;
    animation: dropdownSlide-b-sr9qz5mzdd .2s ease-out;
}

/* Individual option */
.select-option[b-sr9qz5mzdd] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all .2s ease;
    border-bottom: 1px solid #f3f4f6;
    position: relative;
    overflow: hidden;
}

    .select-option:last-child[b-sr9qz5mzdd] {
        border-bottom: none;
        border-radius: 0 0 8px 8px;
    }

    .select-option[b-sr9qz5mzdd]::before {
        content: '';
        position: absolute;
        inset: 0 0 0 -100%;
        background: linear-gradient(90deg, transparent, rgba(0,0,0,.05), transparent);
        transition: left .3s ease;
        left: -100%;
    }

    .select-option:hover[b-sr9qz5mzdd]::before {
        left: 100%;
    }

    .select-option:hover[b-sr9qz5mzdd] {
        background: linear-gradient(145deg, #f8fafc, #f1f5f9);
        color: #000;
        box-shadow: inset 2px 0 0 rgba(0,0,0,.3);
    }

    /* Selected state */
    .select-option.selected[b-sr9qz5mzdd] {
        background: linear-gradient(145deg, #000, #333);
        color: #fff;
        font-weight: 600;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 2px 0 0 rgba(255,255,255,.3);
    }

        .select-option.selected:hover[b-sr9qz5mzdd] {
            background: linear-gradient(145deg, #333, #000);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 2px 0 0 rgba(255,255,255,.4);
        }

/* Scrollbar (optional, for the options list) */
.select-options[b-sr9qz5mzdd]::-webkit-scrollbar {
    width: 6px;
}

.select-options[b-sr9qz5mzdd]::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #f1f5f9, #e2e8f0);
    border-radius: 3px;
}

.select-options[b-sr9qz5mzdd]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #cbd5e1, #94a3b8);
    border-radius: 3px;
    transition: background .3s ease;
}

    .select-options[b-sr9qz5mzdd]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #94a3b8, #64748b);
    }

/* Keep dropdown above other elements when focused */
.custom-select:focus-within[b-sr9qz5mzdd] {
    z-index: 1001;
}

/* Animation used by the dropdown */
@keyframes dropdownSlide-b-sr9qz5mzdd {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(.95);
    }

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

/* Give a bit more vertical room on narrow screens */
@media (max-width: 900px) {
    .pie-chart-container[b-sr9qz5mzdd] {
        min-height: 420px;
    }
}

.orders-stats-grid[b-sr9qz5mzdd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 640px) {
    .orders-stats-grid[b-sr9qz5mzdd] {
        grid-template-columns: 1fr;
    }
}

.orders-stat[b-sr9qz5mzdd] {
    background: var(--lv-background-secondary);
    border: 1px solid var(--lv-border-primary);
    border-radius: var(--lv-border-radius);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .orders-stat.disabled[b-sr9qz5mzdd] {
        opacity: 0.55;
    }

.orders-stat-label[b-sr9qz5mzdd] {
    font-size: var(--lv-font-size-small);
    color: var(--lv-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.orders-stat-value[b-sr9qz5mzdd] {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .2px;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.orders-stat-sub[b-sr9qz5mzdd] {
    font-size: 12px;
    color: var(--lv-text-secondary);
}

.orders-stats-footer[b-sr9qz5mzdd] {
    margin-top: 8px;
    color: var(--lv-text-secondary);
    font-size: 12px;
    text-align: right;
}

.orders-stats-grid[b-sr9qz5mzdd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.orders-stat[b-sr9qz5mzdd] {
    background: var(--lv-background-secondary);
    border: 1px solid var(--lv-border-primary);
    border-radius: var(--lv-border-radius);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .orders-stat.disabled[b-sr9qz5mzdd] {
        opacity: 0.55;
    }

.orders-stat-label[b-sr9qz5mzdd] {
    font-size: var(--lv-font-size-small);
    color: var(--lv-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.orders-stat-value[b-sr9qz5mzdd] {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .2px;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.orders-stat-sub[b-sr9qz5mzdd] {
    font-size: 12px;
    color: var(--lv-text-secondary);
}

.orders-stats-footer[b-sr9qz5mzdd] {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--lv-border-primary);
}

    .orders-stats-footer .meta-chips[b-sr9qz5mzdd] {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        color: var(--lv-text-secondary);
        font-size: 12px;
    }

.meta-chip[b-sr9qz5mzdd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid var(--lv-border-primary);
    background: var(--lv-background-secondary);
    border-radius: 9999px;
    line-height: 1.2;
}

    .meta-chip svg[b-sr9qz5mzdd] {
        width: 14px;
        height: 14px;
    }

    .meta-chip strong[b-sr9qz5mzdd] {
        color: var(--lv-text-primary);
    }


/* --- Orders Data grid: force exactly 2 per row (except small screens) --- */
.chart-card .orders-stats-grid[b-sr9qz5mzdd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px;
}

@media (max-width: 720px) {
    .chart-card .orders-stats-grid[b-sr9qz5mzdd] {
        grid-template-columns: 1fr !important;
    }
}

/* Ensure the card layout supports a sticky bottom footer */
.chart-card[b-sr9qz5mzdd] {
    display: flex;
    flex-direction: column;
}

    .chart-card .card-content[b-sr9qz5mzdd] {
        flex: 1 1 auto; /* fills remaining height */
        min-height: 0; /* allows internal scroll */
        overflow: auto;
    }

/* --- Footer: larger text, stick to bottom, nicer chips --- */
.orders-stats-footer[b-sr9qz5mzdd] {
    flex: 0 0 auto; /* stays at the bottom of the card */
    margin-top: 0;
    padding: 14px 16px; /* bigger */
    border-top: 1px solid var(--lv-border-primary);
    background: var(--lv-background-primary);
}

    .orders-stats-footer .meta-chips[b-sr9qz5mzdd] {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        font-size: 14px; /* larger text */
        line-height: 1.35;
        color: var(--lv-text-secondary);
    }

.meta-chip[b-sr9qz5mzdd] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px; /* bigger pill */
    border: 1px solid var(--lv-border-primary);
    background: var(--lv-background-secondary);
    border-radius: 9999px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}

    .meta-chip svg[b-sr9qz5mzdd] {
        width: 16px;
        height: 16px; /* slightly larger icon */
    }

    .meta-chip strong[b-sr9qz5mzdd] {
        color: var(--lv-text-primary);
        font-weight: 700;
    }

/* Headers & Titles */
.dashboard-header[b-sr9qz5mzdd] {
    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[b-sr9qz5mzdd]::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[b-sr9qz5mzdd]::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;
    }


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

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

    .dashboard-title[b-sr9qz5mzdd] {
        font-size: 1.5rem !important;
        flex-direction: column;
        gap: 16px !important;
        margin-bottom: 0 !important;
    }

    .title-icon[b-sr9qz5mzdd] {
        width: 32px;
        height: 32px;
    }
}

.dashboard-title[b-sr9qz5mzdd] {
    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[b-sr9qz5mzdd] {
    width: 32px;
    height: 32px;
}
.title-icon[b-sr9qz5mzdd] {
    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;
}

@media (max-width: 768px) {
    .summary-cards[b-sr9qz5mzdd],
    .chart-cards[b-sr9qz5mzdd] {
        grid-template-columns: 1fr; /* stack on mobile as you already do */
    }
}
/* Ensure flex children can actually shrink in the header */
.card-header > *[b-sr9qz5mzdd] {
    min-width: 0;
}

@media (max-width: 640px) {
    .customer-tooltip-container[b-sr9qz5mzdd] {
        display: none !important;
    }

    .customer-tooltip-text[b-sr9qz5mzdd] {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .select-trigger[b-sr9qz5mzdd] {
        width: 100% !important;
        margin-left: 10px;
        box-sizing: border-box;
    }
}
/* /Pages/SalesTest.razor.rz.scp.css */
abbr.compare-tooltip[b-7ouk2gudbq] {
    text-decoration: dotted underline;
    cursor: help;
}

.sales-tooltip[b-7ouk2gudbq] {
    position: relative;
    cursor: help;
}

/* Sales search container styling */
.sales-search-container[b-7ouk2gudbq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.search-controls[b-7ouk2gudbq] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-size-selector[b-7ouk2gudbq] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.page-size-dropdown[b-7ouk2gudbq] {
    padding: 4px 8px;
    border: 1px solid var(--lv-border-primary, #e5e7eb);
    border-radius: var(--lv-border-radius, 10px);
    background: var(--lv-background-primary, #ffffff);
    font-size: var(--lv-font-size-small, 12px);
    min-width: 60px;
}

/* Pagination styling - matching CustomerClassification */
.table-footer[b-7ouk2gudbq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lv-border-primary, #e5e7eb);
}

.pagination-info[b-7ouk2gudbq] {
    flex: 1;
}

    .pagination-info p[b-7ouk2gudbq] {
        margin: 0;
        font-size: var(--lv-font-size-small, 12px);
        color: var(--lv-text-secondary, #6b7280);
    }

.pagination-controls[b-7ouk2gudbq] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pagination-btn[b-7ouk2gudbq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--lv-border-primary, #e5e7eb);
    border-radius: var(--lv-border-radius, 10px);
    background: var(--lv-background-primary, #ffffff);
    color: var(--lv-text-primary, #374151);
    cursor: pointer;
    font-size: var(--lv-font-size-small, 12px);
    font-weight: 600;
    transition: all 0.2s ease;
}

    .pagination-btn:hover:not(.disabled)[b-7ouk2gudbq] {
        background: var(--lv-hover-background, #f9fafb);
        border-color: var(--lv-background-accent, #000000);
        color: var(--lv-background-accent, #000000);
    }

    .pagination-btn.active[b-7ouk2gudbq] {
        background: var(--lv-background-accent, #000000);
        color: var(--lv-text-inverted, #ffffff);
        border-color: var(--lv-background-accent, #000000);
    }

    .pagination-btn.disabled[b-7ouk2gudbq] {
        opacity: 0.5;
        cursor: not-allowed;
        background: var(--lv-background-secondary, #f8fafc);
        color: var(--lv-text-disabled, #9ca3af);
    }

.page-number[b-7ouk2gudbq] {
    min-width: 32px;
}

/* Mobile pagination styling */
@media (max-width: 646px) {
    /* Smaller pagination buttons */
    .pagination-btn[b-7ouk2gudbq] {
        width: 28px;
        height: 28px;
        font-size: 11px;
        border-width: 1px;
    }

        .pagination-btn.page-number[b-7ouk2gudbq] {
            min-width: 28px;
            padding: 0 4px;
        }

    .pagination-controls[b-7ouk2gudbq] {
        gap: 2px;
    }

    /* Stack table footer vertically on mobile */
    .table-footer[b-7ouk2gudbq] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .pagination-info[b-7ouk2gudbq] {
        text-align: center;
        order: 2;
    }

    .pagination-controls[b-7ouk2gudbq] {
        justify-content: center;
        order: 1;
    }

    /* Responsive search container */
    .sales-search-container[b-7ouk2gudbq] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .search-controls[b-7ouk2gudbq] {
        justify-content: center;
    }

    .page-size-selector[b-7ouk2gudbq] {
        justify-content: center;
    }
}
/* /Pages/SellerHomePage.razor.rz.scp.css */
/* DEV TESTING: Day Type Simulator Panel */
.dev-testing-panel[b-gh8vioubuo] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin: 0 16px 12px 16px;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    border: 2px dashed #6366f1;
    border-radius: 8px;
    font-size: 13px;
}

.dev-label[b-gh8vioubuo] {
    color: #c7d2fe;
    font-weight: 600;
    white-space: nowrap;
}

.dev-select[b-gh8vioubuo] {
    padding: 6px 12px;
    border: 1px solid #6366f1;
    border-radius: 6px;
    background: #1e1b4b;
    color: #e0e7ff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    min-width: 180px;
}

.dev-select:hover[b-gh8vioubuo] {
    border-color: #818cf8;
    background: #312e81;
}

.dev-select:focus[b-gh8vioubuo] {
    outline: none;
    border-color: #a5b4fc;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.dev-current[b-gh8vioubuo] {
    color: #a5b4fc;
    font-size: 12px;
    padding: 4px 10px;
    background: rgba(99, 102, 241, 0.2);
    border-radius: 4px;
    font-family: monospace;
}

/* Budget Overview Bar - LV Theme */
.budget-overview-bar[b-gh8vioubuo] {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 14px 20px;
    margin: 0 16px 16px 16px;
    background: var(--lv-background-primary, #ffffff);
    border: 1px solid var(--lv-border-primary, #e5e7eb);
    border-radius: var(--lv-border-radius, 12px);
    overflow-x: auto; /* Show scrollbar only when content overflows */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    /* Scrollbar styling - visible when scrollable */
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent; /* For Firefox */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Webkit scrollbar styling (Chrome, Safari, Edge) - visible when scrollable */
.budget-overview-bar[b-gh8vioubuo]::-webkit-scrollbar {
    height: 8px; /* Scrollbar height */
}

.budget-overview-bar[b-gh8vioubuo]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.budget-overview-bar[b-gh8vioubuo]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.budget-overview-bar[b-gh8vioubuo]::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* Date Filter Group */
.date-filter-group[b-gh8vioubuo] {
    display: flex;
    gap: 8px;
    padding-right: 16px;
    border-right: 1px solid var(--lv-border-primary, #e5e7eb);
    flex-shrink: 0;
    align-items: flex-end;
}

/* Budget Metric Cards - LV Theme (White bg, Black text) */
.budget-metric-card[b-gh8vioubuo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    background: var(--lv-background-primary, #fff);
    border: 2px solid var(--lv-border-primary, #e5e7eb);
    border-radius: var(--lv-border-radius-small, 10px);
    min-width: 100px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.budget-metric-card:hover[b-gh8vioubuo] {
    border-color: var(--lv-background-accent, #111);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.budget-metric-card.clickable[b-gh8vioubuo] {
    cursor: pointer;
}

.budget-metric-card.clickable:hover[b-gh8vioubuo] {
    border-color: var(--lv-background-accent, #111);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.budget-metric-card.highlight[b-gh8vioubuo] {
    border-color: #dbdbdb;
}

.budget-metric-card .metric-value[b-gh8vioubuo] {
    font-size: 18px;
    font-weight: 700;
    color: var(--lv-text-primary, #111);
    line-height: 1.2;
}

.budget-metric-card .metric-value.text-positive[b-gh8vioubuo] {
    color: #059669;
}

.budget-metric-card .metric-value.text-negative[b-gh8vioubuo] {
    color: #dc2626;
}

.budget-metric-card .metric-label[b-gh8vioubuo] {
    font-size: 10px;
    font-weight: 500;
    color: black;
    text-align: center;
    margin-top: 4px;
    line-height: 1.3;
}

/* Main Container */
.seller-container[b-gh8vioubuo] {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 380px;
    grid-template-rows: auto auto auto;
    gap: 16px;
    padding: 16px;
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
}

/* Top Row: 3 Cards + Brand Table */
.top-row[b-gh8vioubuo] {
    display: contents;
}

/* Left Sidebar - 3 cards horizontal */
.sidebar[b-gh8vioubuo] {
    display: contents;
}

.card[b-gh8vioubuo] {
    background: white;
    border-radius: 8px;
    padding: 12px 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    height: 200px;
    min-height: 200px;
    max-height: 200px;
}

.card:hover[b-gh8vioubuo] {
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
    transform: translateY(-1px);
    border-color: #e0e0e0;
}

/* Card Header with Icon + Title */
.card-header-row[b-gh8vioubuo] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.card-icon[b-gh8vioubuo] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.card:hover .card-icon[b-gh8vioubuo] {
    transform: scale(1.05);
}

.card:nth-child(1) .card-icon[b-gh8vioubuo] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.card:nth-child(2) .card-icon[b-gh8vioubuo] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.card:nth-child(3) .card-icon[b-gh8vioubuo] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.card-title-wrapper[b-gh8vioubuo] {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card h3[b-gh8vioubuo] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #111;
    letter-spacing: -0.01em;
}

.metrics[b-gh8vioubuo] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 12px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.metric-row[b-gh8vioubuo] {
    display: flex;
    align-items: center;
    padding: 0;
    gap: 12px;
}

.metric-row:last-child[b-gh8vioubuo] {
    border-bottom: none;
}

/* Row with sublabel - uses 2 columns instead of 3 */
.metric-row-with-sublabel[b-gh8vioubuo] {
    display: flex;
    align-items: center;
    padding: 0;
    gap: 12px;
}

/* Simple metric row without change/percentage column (for First Time Buyers) */
.metric-row-simple[b-gh8vioubuo] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.label[b-gh8vioubuo] {
    font-size: 12.5px;
    color: #666;
    font-weight: 500;
    text-align: left;
    flex: 1 1 auto;
    line-height: 1.3;
    text-transform: capitalize;
}

.label-column[b-gh8vioubuo] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 auto;
}

.value[b-gh8vioubuo] {
    font-size: 16px;
    font-weight: 700;
    color: #111;
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    width: 80px;
    flex-shrink: 0;
}

.change[b-gh8vioubuo] {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    text-align: center;
    min-width: 48px;
    justify-self: end;
}

.change.positive[b-gh8vioubuo] {
    color: #10b981;
    background: #d1fae5;
}

.change.negative[b-gh8vioubuo] {
    color: #ef4444;
    background: #fee2e2;
}

/* Reusable percentage value styling - matches Budget card style */
.percentage-value[b-gh8vioubuo] {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 3px;
    text-align: right;
    display: inline-block;
    min-width: 48px;
}

.percentage-value.positive[b-gh8vioubuo] {
    color: #10b981;
    background: #d1fae5;
}

.percentage-value.negative[b-gh8vioubuo] {
    color: #ef4444;
    background: #fee2e2;
}

/* Monthly Target Card Styles */
.target-card .card-icon[b-gh8vioubuo] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.sublabel-inline[b-gh8vioubuo] {
    font-size: 8px;
    color: #999;
    font-weight: 400;
    line-height: 1;
}

.progress-bar-container[b-gh8vioubuo] {
    margin-top: 8px;
    height: 5px;
    background: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar[b-gh8vioubuo] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease, background 0.3s ease;
}

/* Progress bar colors based on target achievement */
.progress-bar-green[b-gh8vioubuo] {
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

.progress-bar-orange[b-gh8vioubuo] {
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

.progress-bar-red[b-gh8vioubuo] {
    background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}

/* Day Off Badge (used in Budget Card "Today" section) */
.value.muted[b-gh8vioubuo] {
    color: #9ca3af;
    font-weight: 400;
}

.day-off-badge[b-gh8vioubuo] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    cursor: help;
    transition: transform 0.15s ease;
}

.day-off-badge:hover[b-gh8vioubuo] {
    transform: scale(1.05);
}

/* Weekend badge - calm blue/gray */
.day-off-badge.weekend[b-gh8vioubuo] {
    color: #475569;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e1;
}

.day-off-badge.weekend i[b-gh8vioubuo] {
    color: #64748b;
}

/* Holiday badge - festive red/gold */
.day-off-badge.holiday[b-gh8vioubuo] {
    color: #b45309;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
}

.day-off-badge.holiday i[b-gh8vioubuo] {
    color: #d97706;
}

/* Future message for cards */
.future-message[b-gh8vioubuo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    text-align: center;
    flex: 1;
}

.future-message i[b-gh8vioubuo] {
    font-size: 24px;
    color: #d1d5db;
    margin-bottom: 8px;
}

.future-message span[b-gh8vioubuo] {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

/* First Time Buyers Horizontal Layout - matches metric-row spacing */
.ftb-horizontal-row[b-gh8vioubuo] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0;
}

.ftb-item[b-gh8vioubuo] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    flex: 1;
    text-align: center;
}

    .ftb-item .label[b-gh8vioubuo] {
        font-size: 12.5px;
        color: #666;
        font-weight: 500;
        text-align: center;
        line-height: 1.3;
        text-wrap-mode: nowrap;
        text-transform: capitalize;
        flex: 1 1 auto;
    }

.ftb-item .value[b-gh8vioubuo] {
    font-size: 16px;
    font-weight: 700;
    color: #111;
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    width: auto;
}

/* Bottom Row - Charts (stacked vertically, span first 3 columns) */
.charts[b-gh8vioubuo] {
    grid-column: 1 / 4;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.chart-box[b-gh8vioubuo] {
    background: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.chart-header[b-gh8vioubuo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.chart-header h3[b-gh8vioubuo] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #111;
}

.chart-select[b-gh8vioubuo] {
    padding: 4px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: white;
    font-size: 14px;
    cursor: pointer;
}

.chart-select:hover[b-gh8vioubuo] {
    border-color: #111;
}

.chart-select:focus[b-gh8vioubuo] {
    outline: none;
    border-color: #111;
}

.chart-box canvas[b-gh8vioubuo] {
    width: 100% !important;
    height: 250px !important;
}

/* Right Section - Table (spans 2 rows) */
.table-section[b-gh8vioubuo] {
    background: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    grid-column: 4;
    grid-row: 1 / 3;
}

.table-header[b-gh8vioubuo] {
    margin-bottom: 16px;
    display:block;
}

.table-header h3[b-gh8vioubuo] {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #111;
}

.search-input[b-gh8vioubuo] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.search-input:focus[b-gh8vioubuo] {
    outline: none;
    border-color: #111;
}

.table-wrapper[b-gh8vioubuo] {
    overflow-y: auto;
    max-height: calc(100vh - 280px);
}

.brand-table[b-gh8vioubuo] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--lv-font-main, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border-radius: var(--lv-border-radius, 10px);
    overflow: hidden;
    border: 1px solid var(--lv-border-primary, #e5e7eb);
    background: var(--lv-background-primary, #ffffff);
}

.brand-table thead[b-gh8vioubuo] {
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand-table th[b-gh8vioubuo] {
    position: relative;
    background: linear-gradient(145deg, var(--lv-background-accent, #000000), var(--lv-hover-accent, #333333));
    color: var(--lv-text-inverted, #ffffff);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: none; /* Remove uppercase - use normal case */
    text-align: left;
    padding: 10px 12px;
    border-bottom: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    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);
}

.brand-table th:hover[b-gh8vioubuo] {
    background: linear-gradient(145deg, var(--lv-hover-accent, #333333), var(--lv-background-accent, #000000));
    color: var(--lv-text-inverted, #ffffff);
}

.sort-icon[b-gh8vioubuo] {
    margin-left: 4px;
    font-size: 10px;
    opacity: 0.8;
    color: var(--lv-text-inverted, #ffffff);
}

.brand-table td[b-gh8vioubuo] {
    padding: 10px;
    border-bottom: 1px solid var(--lv-border-secondary, #f3f4f6);
    font-size: 13px; /* Keep original font size */
    color: var(--lv-text-primary, #374151);
    background-color: var(--lv-background-primary, #ffffff);
}

.brand-table tbody tr[b-gh8vioubuo] {
    transition: all 0.2s ease;
}

.brand-table tbody tr:nth-child(even)[b-gh8vioubuo] {
    background-color: rgba(248, 250, 252, 0.6);
}

.brand-table tbody tr:hover[b-gh8vioubuo] {
    background: linear-gradient(145deg, var(--lv-hover-background, #f9fafb), #f3f4f6);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.brand-table tbody tr:last-child td[b-gh8vioubuo] {
    border-bottom: none;
}

.brand-name[b-gh8vioubuo] {
    font-weight: 600;
    color: #111;
}

.number[b-gh8vioubuo] {
    font-variant-numeric: tabular-nums;
    color: #111;
}

.pagination[b-gh8vioubuo] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}

.page-btn[b-gh8vioubuo] {
    width: 32px;
    height: 32px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-btn:hover:not(:disabled)[b-gh8vioubuo] {
    background: #111;
    color: white;
    border-color: #111;
}

.page-btn:disabled[b-gh8vioubuo] {
    opacity: 0.3;
    cursor: not-allowed;
}

.page-info[b-gh8vioubuo] {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

/* Mobile Only */
@media (max-width: 768px) {
    .dev-testing-panel[b-gh8vioubuo] {
        flex-wrap: wrap;
        margin: 0 12px 12px 12px;
        padding: 8px 12px;
        gap: 8px;
    }

    .dev-select[b-gh8vioubuo] {
        min-width: 150px;
        font-size: 12px;
    }

    .dev-current[b-gh8vioubuo] {
        font-size: 11px;
    }

    .budget-overview-bar[b-gh8vioubuo] {
        margin: 0 12px 12px 12px;
        padding: 10px 12px;
        gap: 10px;
    }

    .date-filter-group[b-gh8vioubuo] {
        padding-right: 12px;
    }

    .budget-metric-card[b-gh8vioubuo] {
        padding: 10px 14px;
        min-width: 85px;
    }

    .budget-metric-card .metric-value[b-gh8vioubuo] {
        font-size: 16px;
    }

    .budget-metric-card .metric-label[b-gh8vioubuo] {
        font-size: 9px;
    }

    .seller-container[b-gh8vioubuo] {
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 12px;
        display:block;
    }

    .sidebar[b-gh8vioubuo] {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .table-section[b-gh8vioubuo] {
        grid-column: 1;
        grid-row: auto;
    }

    .charts[b-gh8vioubuo] {
        grid-column: 1;
        gap: 12px;
    }

    .sidebar[b-gh8vioubuo] {
        flex-direction: column;
        gap: 12px;
    }

    .card[b-gh8vioubuo] {
        padding: 14px;
    }

    .card h3[b-gh8vioubuo] {
        font-size: 15px;
    }

    .value[b-gh8vioubuo] {
        font-size: 15px;
    }

    .charts[b-gh8vioubuo] {
        gap: 12px;
    }

    .chart-box[b-gh8vioubuo] {
        padding: 14px;
    }
    .chart-header[b-gh8vioubuo] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .table-section[b-gh8vioubuo] {
        padding: 14px;
    }

    .brand-table th[b-gh8vioubuo],
    .brand-table td[b-gh8vioubuo] {
        padding: 12px 14px;
        font-size: 11.5px;
        text-wrap-mode: nowrap;
    }

    .table-wrapper[b-gh8vioubuo] {
        max-height: 60vh;
    }
}

/* Budget Breakdown Modal - LV Theme - Mobile First */
.budget-modal-overlay[b-gh8vioubuo] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 7000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
    animation: fadeIn-b-gh8vioubuo 0.2s ease-out;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

/* Mobile: Account for navbar (5rem) */
@media (max-width: 768px) {
    .budget-modal-overlay[b-gh8vioubuo] {
        top: 5rem; /* Navbar height on mobile */
        height: calc(100vh - 5rem);
    }
}

/* Desktop: Account for sidebar */
@media (min-width: 1025px) {
    .budget-modal-overlay[b-gh8vioubuo] {
        left: 220px; /* Account for sidebar width */
        width: calc(100vw - 220px); /* Ensure it doesn't overflow */
    }
}

@keyframes fadeIn-b-gh8vioubuo {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.budget-modal-content[b-gh8vioubuo] {
    background: var(--lv-background-primary, #ffffff);
    border: none;
    border-radius: 0;
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    animation: modalSlideIn-b-gh8vioubuo 0.3s ease-out;
    margin: 0;
    box-sizing: border-box;
}

/* Mobile: Full screen modal, account for navbar */
@media (max-width: 768px) {
    .budget-modal-content[b-gh8vioubuo] {
        border-radius: 0;
        min-height: calc(100vh - 5rem); /* Full height minus navbar */
        max-height: calc(100vh - 5rem);
        width: 100%;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .budget-modal-content[b-gh8vioubuo] {
        margin: calc(var(--lv-spacing-unit) * 2);
        border-radius: var(--lv-border-radius, 12px);
        min-height: calc(100vh - 64px);
        max-height: calc(100vh - 64px);
        width: calc(100% - 32px);
        max-width: calc(100% - 32px);
        border: 1px solid var(--lv-border-primary, #e5e7eb);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    }
}

/* Desktop: Account for sidebar, ensure it fits */
@media (min-width: 1025px) {
    .budget-modal-content[b-gh8vioubuo] {
        margin: calc(var(--lv-spacing-unit) * 2);
        border-radius: var(--lv-border-radius, 12px);
        width: calc(100% - 32px); /* Use 100% of overlay width minus padding */
        max-width: calc(100% - 32px); /* Prevent overflow */
        min-height: calc(100vh - 32px);
        max-height: calc(100vh - 32px);
        border: 1px solid var(--lv-border-primary, #e5e7eb);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    }
}

@keyframes modalSlideIn-b-gh8vioubuo {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.budget-modal-header[b-gh8vioubuo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    border-bottom: 1px solid var(--lv-border-primary, #e5e7eb);
    flex-shrink: 0;
    background: var(--lv-background-primary, #ffffff);
    position: sticky;
    top: 0;
    z-index: 20;
}

.budget-modal-header h3[b-gh8vioubuo] {
    margin: 0;
    font-size: var(--lv-font-size-base, 16px);
    font-weight: 600;
    color: var(--lv-text-primary, #374151);
    font-family: var(--lv-font-heading, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif);
}

@media (min-width: 769px) {
    .budget-modal-header h3[b-gh8vioubuo] {
        font-size: var(--lv-font-size-large, 18px);
    }
}

.budget-modal-close[b-gh8vioubuo] {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--lv-text-secondary, #6b7280);
    cursor: pointer;
    padding: 4px 12px;
    border-radius: var(--lv-border-radius-small, 6px);
    transition: all 0.2s ease;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.budget-modal-close:hover[b-gh8vioubuo] {
    background: var(--lv-hover-background, #f9fafb);
    color: var(--lv-text-primary, #374151);
}

.budget-modal-body[b-gh8vioubuo] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: calc(var(--lv-spacing-unit) * 2);
    background: var(--lv-background-secondary, #f8fafc);
    min-height: 0; /* Critical for flex scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

@media (min-width: 769px) {
    .budget-modal-body[b-gh8vioubuo] {
        padding: calc(var(--lv-spacing-unit) * 3);
    }
}

.budget-table-wrapper[b-gh8vioubuo] {
    overflow-x: auto;
    overflow-y: visible;
    width: 100%;
    border-radius: var(--lv-border-radius, 8px);
    background: var(--lv-background-primary, #ffffff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .budget-table-wrapper[b-gh8vioubuo] {
        border-radius: 0;
        box-shadow: none;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.budget-breakdown-table[b-gh8vioubuo] {
    width: 100%;
    min-width: 1200px; /* Force horizontal scroll on small screens */
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--lv-font-main, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: var(--lv-border-radius, 8px);
    overflow: hidden;
    border: 1px solid var(--lv-border-primary, #e5e7eb);
    background: var(--lv-background-primary, #ffffff);
    table-layout: auto;
}

@media (max-width: 768px) {
    .budget-breakdown-table[b-gh8vioubuo] {
        min-width: 900px;
        border-radius: 0;
    }
    
    .budget-breakdown-table th[b-gh8vioubuo],
    .budget-breakdown-table td[b-gh8vioubuo] {
        font-size: 11.5px;
        padding: 5px;
    }
    
    .category-header-cell[b-gh8vioubuo] {
        font-size: 13px;
        padding: 5px;
    }
}

.budget-breakdown-table thead[b-gh8vioubuo] {
    background: linear-gradient(145deg, #374151, #1f2937);
    position: sticky;
    top: 0;
    z-index: 10;
}

.budget-breakdown-table th[b-gh8vioubuo] {
    padding: 5px;
    text-align: center;
    font-weight: 700;
    color: var(--lv-text-inverted, #ffffff);
    border-bottom: none;
    white-space: nowrap;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    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);
    position: relative;
}

.budget-breakdown-table th:not(:first-child)[b-gh8vioubuo]::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 0;
    height: 60%;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.2);
}

.budget-breakdown-table th:first-child[b-gh8vioubuo] {
    text-align: left;
    padding: 5px;
}

.budget-breakdown-table td[b-gh8vioubuo] {
    padding: 5px;
    border-bottom: 1px solid var(--lv-border-secondary, #f3f4f6);
    color: var(--lv-text-primary, #374151);
    font-size: 13.5px;
    position: relative;
}

.budget-breakdown-table td:not(:first-child)[b-gh8vioubuo]::before {
    content: '';
    position: absolute;
    top: 25%;
    left: 0;
    height: 50%;
    width: 1px;
    background-color: rgba(203, 213, 225, 0.5);
}

.budget-breakdown-table tbody tr[b-gh8vioubuo] {
    transition: all 0.2s ease;
    background-color: var(--lv-background-primary, #ffffff);
}

.budget-breakdown-table tbody tr:nth-child(even)[b-gh8vioubuo] {
    background-color: rgba(248, 250, 252, 0.6);
}

.budget-breakdown-table tbody tr:hover[b-gh8vioubuo] {
    background: linear-gradient(145deg, var(--lv-hover-background, #f9fafb), #f3f4f6);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
}

.budget-breakdown-table tbody tr:last-child td[b-gh8vioubuo] {
    border-bottom: none;
}

.budget-breakdown-table tbody tr.category-row[b-gh8vioubuo] {
    background: linear-gradient(145deg, #f9fafb, #f3f4f6) !important;
    border-top: 2px solid var(--lv-border-primary, #e5e7eb);
    border-bottom: 1px solid var(--lv-border-primary, #e5e7eb);
    font-weight: 700;
    font-size: 11.5px;
}

.budget-breakdown-table tbody tr.category-row td[b-gh8vioubuo] {
    padding: 5px;
}

.budget-breakdown-table tbody tr.brand-row[b-gh8vioubuo] {
    background-color: var(--lv-background-primary, #ffffff);
}

.budget-breakdown-table tbody tr.brand-row:hover[b-gh8vioubuo] {
    background: linear-gradient(145deg, var(--lv-hover-background, #f9fafb), #f3f4f6) !important;
}

.budget-breakdown-table tbody tr.grand-total-row[b-gh8vioubuo] {
    background: linear-gradient(145deg, #1f2937, #374151) !important;
    border-top: 3px solid var(--lv-border-primary, #e5e7eb);
    font-weight: 700;
    font-size: 11.5px;
}

.budget-breakdown-table tbody tr.grand-total-row td[b-gh8vioubuo] {
    border-bottom: none;
    padding: 5px;
    color: var(--lv-text-inverted, #ffffff);
}

.budget-breakdown-table tbody tr.grand-total-row td.text-positive[b-gh8vioubuo],
.budget-breakdown-table tbody tr.grand-total-row td.text-negative[b-gh8vioubuo] {
    color: var(--lv-text-inverted, #ffffff);
}

.budget-breakdown-table .category-name[b-gh8vioubuo] {
    font-weight: 700;
    color: var(--lv-text-primary, #374151);
    text-align: left;
    padding: 5px !important;
    text-transform: uppercase;
    font-size: 11.5px;
}

.category-header-cell[b-gh8vioubuo] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    font-size: 13px;
}

.category-header-cell:hover[b-gh8vioubuo] {
    background-color: rgba(0, 0, 0, 0.02);
}

.category-toggle-icon[b-gh8vioubuo] {
    font-size: 12px;
    color: var(--lv-text-secondary, #6b7280);
    transition: transform 0.2s ease;
    width: 16px;
    text-align: center;
}

.budget-breakdown-table .brand-name[b-gh8vioubuo] {
    font-weight: 500;
    color: var(--lv-text-primary, #374151);
    text-align: left;
    padding: 5px !important;
    padding-left: 20px !important; /* Extra left padding for brand indentation */
    font-size: 13.5px;
}

.budget-breakdown-table tbody tr.brand-row.hidden[b-gh8vioubuo] {
    display: none;
}

.budget-breakdown-table tbody tr.category-row[b-gh8vioubuo] {
    cursor: pointer;
}

.budget-breakdown-table tbody tr.category-row:hover[b-gh8vioubuo] {
    background: linear-gradient(145deg, #f0f0f0, #e8e8e8) !important;
}

.budget-breakdown-table .number[b-gh8vioubuo] {
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding: 5px;
    font-weight: 500;
}

.budget-breakdown-table .text-positive[b-gh8vioubuo] {
    color: #10b981;
    font-weight: 600;
}

.budget-breakdown-table .text-negative[b-gh8vioubuo] {
    color: #ef4444;
    font-weight: 600;
}

.budget-breakdown-table .no-data[b-gh8vioubuo] {
    text-align: center;
    padding: 48px;
    color: var(--lv-text-secondary, #6b7280);
    font-style: italic;
    font-size: 11.5px;
}

/* Custom scrollbars */
.budget-modal-body[b-gh8vioubuo]::-webkit-scrollbar,
.budget-table-wrapper[b-gh8vioubuo]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.budget-modal-body[b-gh8vioubuo]::-webkit-scrollbar-track,
.budget-table-wrapper[b-gh8vioubuo]::-webkit-scrollbar-track {
    background: var(--lv-background-secondary, #f8fafc);
    border-radius: 4px;
}

.budget-modal-body[b-gh8vioubuo]::-webkit-scrollbar-thumb,
.budget-table-wrapper[b-gh8vioubuo]::-webkit-scrollbar-thumb {
    background: var(--lv-border-primary, #e5e7eb);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.budget-modal-body[b-gh8vioubuo]::-webkit-scrollbar-thumb:hover,
.budget-table-wrapper[b-gh8vioubuo]::-webkit-scrollbar-thumb:hover {
    background: var(--lv-text-secondary, #6b7280);
}

/* Mobile-specific improvements */
@media (max-width: 768px) {
    .budget-modal-overlay[b-gh8vioubuo] {
        padding-top: 0;
        align-items: flex-start;
        -webkit-overflow-scrolling: touch;
        top: 5rem; /* Navbar height */
        height: calc(100vh - 5rem);
    }
    
    .budget-modal-content[b-gh8vioubuo] {
        border-radius: 0;
        box-shadow: none;
        min-height: calc(100vh - 5rem); /* Full height minus navbar */
        max-height: calc(100vh - 5rem);
        width: 100%;
    }
    
    .budget-modal-header[b-gh8vioubuo] {
        padding: 12px;
        border-bottom: 2px solid var(--lv-border-primary, #e5e7eb);
        flex-shrink: 0;
    }
    
    .budget-modal-close[b-gh8vioubuo] {
        font-size: 24px;
        padding: 4px 8px;
    }
    
    .budget-modal-body[b-gh8vioubuo] {
        padding: 12px;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    
    .budget-table-wrapper[b-gh8vioubuo] {
        margin: 0;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .budget-breakdown-table[b-gh8vioubuo] {
        min-width: 900px;
    }
    
    .category-header-cell[b-gh8vioubuo] {
        padding: 5px;
    }
    
    .budget-breakdown-table .brand-name[b-gh8vioubuo] {
        padding: 5px !important;
        padding-left: 20px !important;
    }
}

/* ========================================
   SKELETON LOADING STYLES
   ======================================== */

/* Base skeleton element */
.skeleton[b-gh8vioubuo] {
    background-color: #e0e0e0;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    animation: pulse-b-gh8vioubuo 1.5s ease-in-out infinite;
}

.skeleton[b-gh8vioubuo]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150px;
    width: 150px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer-b-gh8vioubuo 1.5s infinite;
}

@keyframes pulse-b-gh8vioubuo {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

@keyframes shimmer-b-gh8vioubuo {
    0% {
        left: -150px;
    }
    50%, 100% {
        left: 100%;
    }
}

/* Skeleton-specific elements */
.skeleton-container[b-gh8vioubuo] {
    animation: fadeIn-b-gh8vioubuo 0.3s ease-in;
}

@keyframes fadeIn-b-gh8vioubuo {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.skeleton-select[b-gh8vioubuo] {
    background-color: #e0e0e0;
    border-radius: 6px;
}

.skeleton-text[b-gh8vioubuo] {
    background-color: #e0e0e0;
    border-radius: 4px;
}

.skeleton-metric-card[b-gh8vioubuo] {
    background: #f5f5f5 !important;
    border-color: #e0e0e0 !important;
}

.skeleton-card[b-gh8vioubuo] {
    background: #f5f5f5 !important;
}

.skeleton-icon[b-gh8vioubuo] {
    width: 32px;
    height: 32px;
    background-color: #d0d0d0;
    border-radius: 6px;
    margin-bottom: 12px;
}

.skeleton-badge[b-gh8vioubuo] {
    background-color: #e0e0e0;
    border-radius: 4px;
}

.skeleton-progress[b-gh8vioubuo] {
    width: 100%;
    height: 100%;
    background-color: #d0d0d0;
    border-radius: 4px;
}

.skeleton-chart-box[b-gh8vioubuo] {
    background: #f5f5f5 !important;
}

.skeleton-canvas[b-gh8vioubuo] {
    width: 100%;
    height: 250px;
    background-color: #e0e0e0;
    border-radius: 8px;
}

.skeleton-table-section[b-gh8vioubuo] {
    background: #f5f5f5 !important;
}

.skeleton-input[b-gh8vioubuo] {
    width: 100%;
    height: 36px;
    background-color: #e0e0e0;
    border-radius: 6px;
}

.skeleton-table-header[b-gh8vioubuo] {
    width: 80%;
    height: 14px;
    background-color: #d0d0d0;
    border-radius: 3px;
    margin: 0 auto;
}

.skeleton-table-cell[b-gh8vioubuo] {
    width: 70%;
    height: 12px;
    background-color: #e0e0e0;
    border-radius: 3px;
}

.skeleton-page-btn[b-gh8vioubuo] {
    width: 32px;
    height: 32px;
    background-color: #e0e0e0;
    border-radius: 6px;
}

/* Loading state for cards */
.card.skeleton-card .metrics .metric-row[b-gh8vioubuo] {
    border-bottom-color: #e0e0e0;
}

/* Disable hover effects on skeleton elements */
.skeleton-card:hover[b-gh8vioubuo],
.skeleton-chart-box:hover[b-gh8vioubuo],
.skeleton-table-section:hover[b-gh8vioubuo] {
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transform: none;
}

/* Mobile skeleton adjustments */
@media (max-width: 768px) {
    .skeleton-canvas[b-gh8vioubuo] {
        height: 200px;
    }
    
    .skeleton-metric-card[b-gh8vioubuo] {
        min-width: 75px;
    }
}

/* ========================================
   SKELETON LOADING STYLES
   ======================================== */

/* Base skeleton element */
.skeleton[b-gh8vioubuo] {
    background-color: #e0e0e0;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    animation: pulse-b-gh8vioubuo 1.5s ease-in-out infinite;
}

.skeleton[b-gh8vioubuo]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150px;
    width: 150px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer-b-gh8vioubuo 1.5s infinite;
}

@keyframes pulse-b-gh8vioubuo {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

@keyframes shimmer-b-gh8vioubuo {
    0% {
        left: -150px;
    }
    50%, 100% {
        left: 100%;
    }
}

/* Skeleton-specific elements */
.skeleton-container[b-gh8vioubuo] {
    animation: fadeIn-b-gh8vioubuo 0.3s ease-in;
}

@keyframes fadeIn-b-gh8vioubuo {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.skeleton-select[b-gh8vioubuo] {
    background-color: #e0e0e0;
    border-radius: 6px;
}

.skeleton-text[b-gh8vioubuo] {
    background-color: #e0e0e0;
    border-radius: 4px;
}

.skeleton-metric-card[b-gh8vioubuo] {
    background: #f5f5f5 !important;
    border-color: #e0e0e0 !important;
}

.skeleton-card[b-gh8vioubuo] {
    background: #f5f5f5 !important;
}

.skeleton-icon[b-gh8vioubuo] {
    width: 32px;
    height: 32px;
    background-color: #d0d0d0;
    border-radius: 6px;
    margin-bottom: 12px;
}

.skeleton-badge[b-gh8vioubuo] {
    background-color: #e0e0e0;
    border-radius: 4px;
}

.skeleton-progress[b-gh8vioubuo] {
    width: 100%;
    height: 100%;
    background-color: #d0d0d0;
    border-radius: 4px;
}

.skeleton-chart-box[b-gh8vioubuo] {
    background: #f5f5f5 !important;
}

.skeleton-canvas[b-gh8vioubuo] {
    width: 100%;
    height: 250px;
    background-color: #e0e0e0;
    border-radius: 8px;
}

.skeleton-table-section[b-gh8vioubuo] {
    background: #f5f5f5 !important;
}

.skeleton-input[b-gh8vioubuo] {
    width: 100%;
    height: 36px;
    background-color: #e0e0e0;
    border-radius: 6px;
}

.skeleton-table-header[b-gh8vioubuo] {
    width: 80%;
    height: 14px;
    background-color: #d0d0d0;
    border-radius: 3px;
    margin: 0 auto;
}

.skeleton-table-cell[b-gh8vioubuo] {
    width: 70%;
    height: 12px;
    background-color: #e0e0e0;
    border-radius: 3px;
}

.skeleton-page-btn[b-gh8vioubuo] {
    width: 32px;
    height: 32px;
    background-color: #e0e0e0;
    border-radius: 6px;
}

/* Loading state for cards */
.card.skeleton-card .metrics .metric-row[b-gh8vioubuo] {
    border-bottom-color: #e0e0e0;
}

/* Disable hover effects on skeleton elements */
.skeleton-card:hover[b-gh8vioubuo],
.skeleton-chart-box:hover[b-gh8vioubuo],
.skeleton-table-section:hover[b-gh8vioubuo] {
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transform: none;
}
/* /Pages/SingleCustomer.razor.rz.scp.css */
/* =====================================
   SINGLE CUSTOMER PAGE - CSS
   ===================================== */

/* CSS Variables */
:root[b-h3l8xf2g7h] {
    --primary-white: #ffffff;
    --secondary-white: #f8f9fa;
    --tertiary-white: #e9ecef;
    --primary-black: #000000;
    --secondary-black: #212529;
    --accent-gray: #6c757d;
    --border-color: #dee2e6;
    --highlight-color: #000000;
}

/* =====================================
   ERROR HANDLING
   ===================================== */
.error-container[b-h3l8xf2g7h] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 2rem;
}

.error-card[b-h3l8xf2g7h] {
    background: linear-gradient(145deg, var(--primary-white), var(--secondary-white));
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 3rem;
    text-align: center;
    max-width: 500px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    animation: slideUp-b-h3l8xf2g7h 0.6s ease-out;
}

.error-icon[b-h3l8xf2g7h] {
    margin-bottom: 1.5rem;
    color: var(--accent-gray);
}

.error-content h2[b-h3l8xf2g7h] {
    color: var(--primary-black);
    margin-bottom: 1rem;
    font-weight: 300;
    font-size: 2rem;
}

.error-content p[b-h3l8xf2g7h] {
    color: var(--accent-gray);
    line-height: 1.6;
    font-size: 1.1rem;
}

.highlight[b-h3l8xf2g7h] {
    color: var(--primary-black);
    font-weight: 600;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.05), transparent);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}

/* =====================================
   MAIN LAYOUT
   ===================================== */
.profile-container[b-h3l8xf2g7h] {
    min-height: 100vh;
    color: var(--primary-black);
    animation: fadeIn-b-h3l8xf2g7h 0.8s ease-out;
    overflow-x: hidden;
}

/* Hero Header */
.hero-header[b-h3l8xf2g7h] {
    position: relative;
    background: linear-gradient(135deg, #ffffff 0%, var(--secondary-white) 100%);
    padding: 1.5rem;
    overflow: hidden;
    border-radius: 16px;
    margin: 0 2rem;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.hero-content[b-h3l8xf2g7h] {
    position: relative;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 3rem;
    z-index: 2;
}

.customer-avatar[b-h3l8xf2g7h] {
    background: linear-gradient(45deg, var(--primary-black), var(--secondary-black));
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 10px;
}

.customer-avatar svg[b-h3l8xf2g7h] {
    color: var(--primary-white);
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.2));
    width: 100%;
    height: 100%;
}

.customer-info[b-h3l8xf2g7h] {
    flex: 1;
}

.customer-name[b-h3l8xf2g7h] {
    font-weight: 100;
    margin: 0;
    padding: 12px;
}

.customer-meta[b-h3l8xf2g7h] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    margin-top: 0.9rem;
    font-size: 1.2rem;
    color: var(--accent-gray);
}

.meta-item[b-h3l8xf2g7h] {
    position: relative;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 25px;
    border: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.meta-item:hover[b-h3l8xf2g7h] {
    background: rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.meta-divider[b-h3l8xf2g7h] {
    color: var(--border-color);
    font-weight: 300;
}

.contact-info[b-h3l8xf2g7h] {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.contact-link[b-h3l8xf2g7h] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-black);
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 25px;
    background: rgba(0, 0, 0, 0.03);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.contact-link:hover[b-h3l8xf2g7h] {
    background: rgba(0, 0, 0, 0.08);
    color: var(--primary-black);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.contact-link svg[b-h3l8xf2g7h] {
    transition: transform 0.3s ease;
}

.contact-link:hover svg[b-h3l8xf2g7h] {
    transform: scale(1.1);
}

/* Customer Level Badge */
.customer-level-badge[b-h3l8xf2g7h] {
    position: absolute;
    top: 2rem;
    right: 2rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.level-badge[b-h3l8xf2g7h] {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.level-badge:hover[b-h3l8xf2g7h] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.level-badge.diamond[b-h3l8xf2g7h] {
    background: linear-gradient(135deg, #b9f2ff 0%, #00d4ff 100%);
    color: #003d4d;
}

.level-badge.gold[b-h3l8xf2g7h] {
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    color: #4d3800;
}

.level-badge.silver[b-h3l8xf2g7h] {
    background: linear-gradient(135deg, #e8e8e8 0%, #c0c0c0 100%);
    color: #424242;
}

.level-badge.bronze[b-h3l8xf2g7h] {
    background: linear-gradient(135deg, #cd7f32 0%, #b8860b 100%);
    color: #2e1a0a;
}

.level-badge.default[b-h3l8xf2g7h] {
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
    color: #424242;
}

.classification-badge[b-h3l8xf2g7h] {
    display: block;
    text-align: center;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.classification-badge:hover[b-h3l8xf2g7h] {
    background: #e5e7eb;
    border-color: #9ca3af;
}

/* =====================================
   CONTENT GRID
   ===================================== */
.content-grid[b-h3l8xf2g7h] {
    margin: 0 auto;
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
    max-width: 100%;
    overflow-x: hidden;
}

.main-column[b-h3l8xf2g7h] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-column[b-h3l8xf2g7h] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* =====================================
   CARDS
   ===================================== */
.data-card[b-h3l8xf2g7h], .stats-card[b-h3l8xf2g7h], .list-card[b-h3l8xf2g7h] {
    background: linear-gradient(145deg, var(--primary-white), var(--secondary-white));
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-top: 1rem;
    background: white;
    padding: 25px;
    transition: all 0.3s ease;
}

.data-card:hover[b-h3l8xf2g7h], .stats-card:hover[b-h3l8xf2g7h], .list-card:hover[b-h3l8xf2g7h] {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* Card Headers */
.card-header[b-h3l8xf2g7h] {
    position: relative;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 10px;
}

.card-header h3[b-h3l8xf2g7h] {
    font-size: 1.5rem;
    font-weight: 300;
    margin: 0 0 1rem 0;
    color: var(--primary-black);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.header-line[b-h3l8xf2g7h] {
    height: 1px;
    background: linear-gradient(90deg, var(--highlight-color), transparent);
    margin-bottom: 1rem;
    flex-grow: 1;
    margin-left: 15px;
}

.card-content[b-h3l8xf2g7h] {
    padding: 0 2rem 2rem;
}

/* Detail Grid */
.detail-grid[b-h3l8xf2g7h] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.detail-section h4[b-h3l8xf2g7h] {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--primary-black);
    margin: 0 0 1.5rem 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}

.detail-section h4[b-h3l8xf2g7h]::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    width: 50%;
    height: 1px;
    background: var(--border-color);
}

.detail-item[b-h3l8xf2g7h] {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-item label[b-h3l8xf2g7h] {
    font-size: 0.8rem;
    color: var(--accent-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.detail-item span[b-h3l8xf2g7h] {
    color: var(--primary-black);
    font-size: 0.95rem;
    line-height: 1.4;
}

.address-wrapper[b-h3l8xf2g7h] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.address-text[b-h3l8xf2g7h] {
    color: #000000;
    flex: 0 1 auto;
}

.map-btn[b-h3l8xf2g7h] {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem;
    color: var(--primary-black);
    cursor: pointer;
    transition: all 0.3s ease;
}

.map-btn:hover[b-h3l8xf2g7h] {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--highlight-color);
    transform: scale(1.1);
}

.map-btn svg[b-h3l8xf2g7h] {
    color: black;
    width: 20px;
    height: 20px;
}

.no-data[b-h3l8xf2g7h] {
    color: var(--accent-gray);
    font-style: italic;
    font-size: 0.9rem;
}

/* Action Buttons */
.action-btn[b-h3l8xf2g7h] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(45deg, var(--primary-black), var(--secondary-black));
    color: var(--primary-white);
    border: none;
    border-radius: 10px;
    padding: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 1rem;
}

.action-btn:hover[b-h3l8xf2g7h] {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.action-btn svg[b-h3l8xf2g7h] {
    transition: transform 0.3s ease;
    width: 16px;
    height: 16px;
}

.action-btn:hover svg[b-h3l8xf2g7h] {
    transform: rotate(45deg);
}

/* Year Filters */
.year-filters[b-h3l8xf2g7h] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    margin-top: 15px;
    margin-left: 15px;
}

.year-btn[b-h3l8xf2g7h] {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--accent-gray);
    border-radius: 20px;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.year-btn:hover[b-h3l8xf2g7h] {
    border-color: var(--highlight-color);
    color: white;
    background-color: var(--secondary-black);
}

.year-btn.active[b-h3l8xf2g7h] {
    background: var(--primary-black);
    color: var(--primary-white);
    border-color: var(--primary-black);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

/* Chart */
.chart-container[b-h3l8xf2g7h] {
    position: relative;
    height: 300px;
    margin: 1rem 0;
    border-radius: 12px;
    padding: 1rem;
}

.chart-container canvas[b-h3l8xf2g7h] {
    cursor: pointer;
}

.no-data-message[b-h3l8xf2g7h] {
    text-align: center;
    color: var(--accent-gray);
    padding: 3rem;
    font-style: italic;
}

/* Stats Card */
.stats-card .card-content[b-h3l8xf2g7h] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.stat-item[b-h3l8xf2g7h] {
    text-align: center;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 65px;
}

.stat-item:hover[b-h3l8xf2g7h] {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.stat-value[b-h3l8xf2g7h] {
    font-size: 1.4rem;
    font-weight: 200;
    color: var(--primary-black);
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.stat-label[b-h3l8xf2g7h] {
    font-size: 0.7rem;
    color: var(--accent-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

/* List Cards */
.item-list[b-h3l8xf2g7h] {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.list-item[b-h3l8xf2g7h] {
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    color: var(--primary-black);
    font-size: 0.9rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
}

.list-item:hover[b-h3l8xf2g7h] {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.15);
    transform: translateX(5px);
    text-decoration: underline;
}

.expand-btn[b-h3l8xf2g7h] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--primary-black);
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.expand-btn:hover[b-h3l8xf2g7h] {
    color: white;
    background-color: black;
}

.expand-btn svg[b-h3l8xf2g7h] {
    transition: transform 0.3s ease;
}

.expand-btn:hover svg[b-h3l8xf2g7h] {
    transform: translateX(5px);
}

.order-link[b-h3l8xf2g7h] {
    color: #000;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    background: none;
    border: 0;
}

.order-link:hover[b-h3l8xf2g7h] {
    text-decoration: none;
}

/* =====================================
   CUSTOMER MODALS
   ===================================== */

/* Modal Overlay */
.customer-modal-overlay[b-h3l8xf2g7h] {
    position: fixed;
    top: 0;
    left: 220px;
    width: calc(100% - 220px);
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(10px);
    animation: fadeIn-b-h3l8xf2g7h 0.3s ease-out;
    overflow-y: auto;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

.customer-modal-overlay.show[b-h3l8xf2g7h] {
    display: flex;
}

/* Modal Container */
.customer-modal-container[b-h3l8xf2g7h] {
    border: 1px solid var(--border-color);
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    animation: scaleIn-b-h3l8xf2g7h 0.4s ease-out;
    position: relative;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    margin: auto;
    box-sizing: border-box;
}

.customer-modal-container.large[b-h3l8xf2g7h] {
    max-width: 1140px;
}

/* Modal Header */
.customer-modal-header[b-h3l8xf2g7h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    gap: 1rem;
    min-height: 60px;
    box-sizing: border-box;
}

.customer-modal-header h2[b-h3l8xf2g7h] {
    font-size: 1.8rem;
    font-weight: 600;
    color: black;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.close-btn[b-h3l8xf2g7h] {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem;
    color: var(--primary-black);
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover[b-h3l8xf2g7h] {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--highlight-color);
    transform: scale(1.1);
}

.close-btn svg[b-h3l8xf2g7h] {
    color: var(--accent-gray);
    width: 24px;
    height: 24px;
    display: block;
}

/* Modal Body */
.customer-modal-body[b-h3l8xf2g7h] {
    padding: 2rem;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 0;
    box-sizing: border-box;
}

.customer-modal-body[b-h3l8xf2g7h]::-webkit-scrollbar {
    width: 8px;
}

.customer-modal-body[b-h3l8xf2g7h]::-webkit-scrollbar-track {
    background: var(--secondary-white);
}

.customer-modal-body[b-h3l8xf2g7h]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.customer-modal-body[b-h3l8xf2g7h]::-webkit-scrollbar-thumb:hover {
    background: var(--accent-gray);
}

/* Modal Sections */
.customer-modal-section[b-h3l8xf2g7h] {
    margin-bottom: 2rem;
    background: var(--secondary-white);
    border-radius: 10px;
    padding: 20px;
    flex-shrink: 0;
}

.customer-modal-section h3[b-h3l8xf2g7h] {
    font-size: 1.3rem;
    font-weight: 600;
    color: black;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Modal Stats */
.customer-modal-stats[b-h3l8xf2g7h] {
    margin-bottom: 2rem;
    text-align: center;
}

.stats-badge[b-h3l8xf2g7h] {
    background: linear-gradient(45deg, var(--primary-black), var(--secondary-black));
    color: var(--primary-white);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Info Grid */
.info-grid[b-h3l8xf2g7h] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .info-grid[b-h3l8xf2g7h] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.info-item[b-h3l8xf2g7h] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-sizing: border-box;
    min-width: 0;
}

.info-item label[b-h3l8xf2g7h] {
    font-size: 0.8rem;
    color: var(--accent-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.info-item span[b-h3l8xf2g7h] {
    color: var(--primary-black);
    font-size: 0.95rem;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
}

/* Modal Tables */
.customer-modal-table[b-h3l8xf2g7h] {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: auto;
    border-radius: 8px;
    margin-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    width: 100%;
}

.customer-modal-table .data-table[b-h3l8xf2g7h] {
    margin-bottom: 0;
    max-height: none;
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
}

/* Data Tables */
.data-table[b-h3l8xf2g7h] {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    margin: 0 auto 2rem;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    table-layout: auto;
}

.data-table thead[b-h3l8xf2g7h] {
    background: #000000;
}

.data-table thead th[b-h3l8xf2g7h] {
    padding: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    box-sizing: border-box;
    white-space: nowrap;
    vertical-align: middle;
}

.data-table tbody tr[b-h3l8xf2g7h] {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.3s ease;
    background: #ffffff;
}

.data-table tbody tr:hover[b-h3l8xf2g7h] {
    background: rgba(0, 0, 0, 0.02);
}

.data-table tbody tr:last-child[b-h3l8xf2g7h] {
    border-bottom: none;
}

.data-table tbody td[b-h3l8xf2g7h] {
    padding: 1rem;
    font-size: 0.75rem;
    color: #000000;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
    vertical-align: middle;
    text-align: center;
}

/* Table Column Widths */
.data-table[b-h3l8xf2g7h] {
    table-layout: auto;
    width: 100%;
}

.data-table .col-brand[b-h3l8xf2g7h] {
    width: 2fr;
    min-width: 150px;
}

.data-table .col-category[b-h3l8xf2g7h] {
    width: 1fr;
    min-width: 100px;
}

.data-table .col-skus[b-h3l8xf2g7h],
.data-table .col-qty[b-h3l8xf2g7h] {
    width: 80px;
    text-align: center;
}

.data-table .col-sales[b-h3l8xf2g7h] {
    width: 120px;
    text-align: center;
}

.customer-modal-container.large .data-table .col-name[b-h3l8xf2g7h] {
    width: 2fr;
    min-width: 200px;
}

.customer-modal-container.large .data-table .col-sku[b-h3l8xf2g7h] {
    width: 120px;
}

.customer-modal-container.large .data-table .col-brand[b-h3l8xf2g7h] {
    width: 1.5fr;
    min-width: 150px;
}

.customer-modal-container.large .data-table .col-qty[b-h3l8xf2g7h] {
    width: 80px;
    text-align: center;
}

.customer-modal-container.large .data-table .col-sales[b-h3l8xf2g7h] {
    width: 120px;
    text-align: center;
}

.customer-modal-container.large .data-table .col-first[b-h3l8xf2g7h] {
    width: 100px;
    text-align: center;
}

/* Items Table */
.items-table-wrapper[b-h3l8xf2g7h] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    width: 100%;
}

.items-table[b-h3l8xf2g7h] {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    table-layout: auto;
}

.items-table thead[b-h3l8xf2g7h] {
    background: #000000;
}

.items-table thead th[b-h3l8xf2g7h] {
    padding: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    text-align: center;
    box-sizing: border-box;
    white-space: nowrap;
    vertical-align: middle;
}

.items-table tbody tr[b-h3l8xf2g7h] {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.3s ease;
    background: #ffffff;
}

.items-table tbody tr:hover[b-h3l8xf2g7h] {
    background: rgba(0, 0, 0, 0.02);
}

.items-table tbody tr:last-child[b-h3l8xf2g7h] {
    border-bottom: none;
}

.items-table tbody td[b-h3l8xf2g7h] {
    padding: 1rem;
    font-size: 0.75rem;
    color: #000000;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
    vertical-align: middle;
    text-align: center;
}

.items-table .col-rank[b-h3l8xf2g7h] {
    width: 80px;
    text-align: center;
}

.items-table .col-name[b-h3l8xf2g7h] {
    width: 2fr;
    min-width: 200px;
    text-align: center;
}

.items-table .col-sku[b-h3l8xf2g7h] {
    width: 120px;
    text-align: center;
}

.items-table .col-qty[b-h3l8xf2g7h] {
    width: 80px;
    text-align: center;
}

.items-table .col-price[b-h3l8xf2g7h] {
    width: 120px;
    text-align: center;
}

/* Rank Tooltip */
.rank-header-tooltip[b-h3l8xf2g7h] {
    position: relative;
    cursor: help;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    min-width: 0;
    white-space: nowrap;
}

.rank-header-tooltip .info-icon[b-h3l8xf2g7h] {
    display: inline-block;
    vertical-align: middle;
    color: #ffffff !important;
    stroke: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    padding: 2px;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

.rank-header-tooltip:hover .info-icon[b-h3l8xf2g7h] {
    background-color: rgba(255, 255, 255, 0.3);
}

.rank-tooltip[b-h3l8xf2g7h] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1001;
    margin-top: 8px;
    pointer-events: none;
    width: 320px;
    max-width: calc(100vw - 40px);
}

.rank-tooltip[b-h3l8xf2g7h]::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--primary-black);
}

.tooltip-content[b-h3l8xf2g7h] {
    background: var(--primary-black);
    color: var(--primary-white);
    padding: 16px 20px;
    border-radius: 10px;
    line-height: 1.5;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    width: 100%;
    white-space: normal;
    text-align: left;
    font-weight: 400;
}

.tooltip-title[b-h3l8xf2g7h] {
    color: var(--primary-white);
    font-weight: 600;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 8px;
}

.tooltip-description[b-h3l8xf2g7h] {
    color: var(--primary-white);
    margin-bottom: 12px;
    line-height: 1.4;
}

.tooltip-example[b-h3l8xf2g7h] {
    color: var(--primary-white);
    font-size: 0.85rem;
    padding-left: 8px;
    border-left: 2px solid var(--highlight-color);
}

/* Sortable Headers */
.sortable[b-h3l8xf2g7h] {
    cursor: pointer;
    user-select: none;
    transition: color 0.3s ease;
    position: relative;
    white-space: nowrap;
}

.sortable:hover[b-h3l8xf2g7h] {
    color: var(--secondary-white) !important;
}

.sortable i[b-h3l8xf2g7h] {
    display: inline-block;
    margin-left: 0.25rem;
    vertical-align: middle;
}

/* Brand Tags */
.brand-tags[b-h3l8xf2g7h] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.brand-tag[b-h3l8xf2g7h] {
    border: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    background: #ffffff;
    color: #000000;
    border-radius: 5px;
    font-weight: 600;
}

.brand-tag:hover[b-h3l8xf2g7h] {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--highlight-color);
    transform: translateY(-2px);
}

/* Pagination */
.pagination[b-h3l8xf2g7h] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.page-btn[b-h3l8xf2g7h] {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--primary-black);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.page-btn:hover:not(.disabled)[b-h3l8xf2g7h] {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--highlight-color);
}

.page-btn.disabled[b-h3l8xf2g7h] {
    opacity: 0.3;
    cursor: not-allowed;
}

.page-info[b-h3l8xf2g7h] {
    color: var(--accent-gray);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Address Modal Specific */
.address-info[b-h3l8xf2g7h] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95rem;
    color: black;
}

.address-info svg[b-h3l8xf2g7h] {
    color: var(--highlight-color);
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.map-container[b-h3l8xf2g7h] {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 2rem;
    width: 100%;
    height: 250px;
}

.map-container iframe[b-h3l8xf2g7h] {
    width: 100%;
    height: 100%;
    border: none;
}

.map-actions[b-h3l8xf2g7h] {
    text-align: center;
    margin-bottom: 2rem;
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
}

.map-link[b-h3l8xf2g7h] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 25px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    color: black;
    font-weight: 500;
}

.map-link:hover[b-h3l8xf2g7h] {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--highlight-color);
    color: var(--highlight-color);
    transform: translateY(-2px);
    text-decoration: underline;
}

.map-link svg[b-h3l8xf2g7h] {
    width: 16px;
    height: 16px;
    color: black;
}

.address-note[b-h3l8xf2g7h] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--accent-gray);
    margin-top: 15px;
    font-size: 0.85rem;
}

.address-note svg[b-h3l8xf2g7h] {
    color: var(--highlight-color);
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* =====================================
   ANIMATIONS
   ===================================== */
@keyframes fadeIn-b-h3l8xf2g7h {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp-b-h3l8xf2g7h {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn-b-h3l8xf2g7h {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* =====================================
   RESPONSIVE DESIGN
   ===================================== */

@media (max-width: 1200px) {
    .content-grid[b-h3l8xf2g7h] {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .sidebar-column[b-h3l8xf2g7h] {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-template-rows: auto;
        display: grid;
    }
}

@media (max-width: 768px) {
    html[b-h3l8xf2g7h], body[b-h3l8xf2g7h] {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    .profile-container[b-h3l8xf2g7h] {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    .hero-content[b-h3l8xf2g7h] {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }
    
    .customer-name[b-h3l8xf2g7h] {
        font-size: 2.5rem;
    }
    
    .customer-meta[b-h3l8xf2g7h] {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .contact-info[b-h3l8xf2g7h] {
        flex-direction: column;
        gap: 1rem;
    }
    
    .detail-grid[b-h3l8xf2g7h] {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .stats-card .card-content[b-h3l8xf2g7h] {
        grid-template-columns: 1fr;
    }
    
    .info-grid[b-h3l8xf2g7h] {
        grid-template-columns: 1fr;
    }
    
    /* Customer Modal - Mobile */
    .customer-modal-overlay[b-h3l8xf2g7h] {
        top: 5rem;
        left: 0;
        width: 100%;
        height: calc(100vh - 5rem);
        padding: 1rem 0.5rem;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
    }
    
    .customer-modal-container[b-h3l8xf2g7h] {
        width: calc(100% - 1rem);
        max-width: 100%;
        max-height: calc(100vh - 5rem - 2rem);
        margin: auto;
        border-radius: 8px;
    }
    
    .customer-modal-header[b-h3l8xf2g7h] {
        padding: 1rem;
        flex-wrap: nowrap;
        gap: 0.75rem;
        min-height: 50px;
    }
    
    .customer-modal-header h2[b-h3l8xf2g7h] {
        font-size: 1.1rem;
        margin-right: 0;
        flex: 1;
        min-width: 0;
        white-space: normal;
        line-height: 1.3;
    }
    
    .customer-modal-body[b-h3l8xf2g7h] {
        padding: 1rem;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior-y: contain;
        flex: 1 1 auto;
        min-height: 0;
    }
    
    .customer-modal-table[b-h3l8xf2g7h] {
        max-height: 50vh;
        overflow-y: auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        overscroll-behavior: contain;
        touch-action: pan-x pan-y;
    }
    
    .customer-modal-table .data-table[b-h3l8xf2g7h] {
        width: 100%;
        min-width: 530px;
    }
    
    .items-table-wrapper[b-h3l8xf2g7h] {
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-height: 50vh;
        overscroll-behavior: contain;
        touch-action: pan-x pan-y;
    }
    
    .items-table-wrapper .items-table[b-h3l8xf2g7h] {
        width: 100%;
        min-width: 470px;
    }
    
    .rank-tooltip[b-h3l8xf2g7h] {
        display: none !important;
    }
    
    .rank-header-tooltip .info-icon[b-h3l8xf2g7h] {
        display: inline-block !important;
        color: #ffffff !important;
        stroke: #ffffff !important;
        background-color: rgba(255, 255, 255, 0.2) !important;
        border-radius: 50% !important;
        padding: 2px !important;
    }
    
    .rank-header-tooltip[b-h3l8xf2g7h] {
        cursor: help;
    }
    
    .customer-modal-table .data-table[b-h3l8xf2g7h] {
        min-width: 530px;
    }
    
    .customer-modal-table .data-table thead th[b-h3l8xf2g7h],
    .customer-modal-table .data-table tbody td[b-h3l8xf2g7h] {
        padding: 0.75rem 0.5rem;
        font-size: 0.75rem;
        text-align: center;
    }
    
    .customer-modal-container.large .customer-modal-table .data-table[b-h3l8xf2g7h] {
        min-width: 770px;
    }
    
    .items-table-wrapper .items-table[b-h3l8xf2g7h] {
        min-width: 470px;
    }
    
    .items-table-wrapper .items-table thead th[b-h3l8xf2g7h],
    .items-table-wrapper .items-table tbody td[b-h3l8xf2g7h] {
        padding: 0.75rem 0.5rem;
        font-size: 0.75rem;
        text-align: center;
    }
    
    .card-header[b-h3l8xf2g7h] {
        padding: 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .card-content[b-h3l8xf2g7h] {
        padding: 1rem;
    }
    
    .content-grid[b-h3l8xf2g7h] {
        padding: 1rem;
        gap: 1rem;
    }
    
    .year-filters[b-h3l8xf2g7h] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .year-btn[b-h3l8xf2g7h] {
        padding: 0.4rem 0.8rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .hero-header[b-h3l8xf2g7h] {
        padding: 2rem 1rem 4rem;
    }
    
    .customer-name[b-h3l8xf2g7h] {
        font-size: 2rem;
    }
    
    .content-grid[b-h3l8xf2g7h] {
        padding: 0.5rem;
    }
    
    .card-header[b-h3l8xf2g7h],
    .card-content[b-h3l8xf2g7h] {
        padding: 1rem;
    }
    
    .map-container[b-h3l8xf2g7h] {
        height: 200px;
    }
    
    .stats-card .card-content[b-h3l8xf2g7h] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .stat-item[b-h3l8xf2g7h] {
        flex-direction: column;
        text-align: center;
        padding: 0.75rem 0.5rem;
        min-height: 70px;
    }
    
    .stat-value[b-h3l8xf2g7h] {
        font-size: 1.2rem;
        margin-bottom: 0.25rem;
    }
    
    .address-wrapper[b-h3l8xf2g7h] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .map-btn[b-h3l8xf2g7h] {
        align-self: flex-start;
    }
    
    .contact-info[b-h3l8xf2g7h] {
        gap: 0.5rem;
    }
    
    .contact-link[b-h3l8xf2g7h] {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
    
    .brand-tags[b-h3l8xf2g7h] {
        gap: 0.25rem;
    }
    
    .brand-tag[b-h3l8xf2g7h] {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }
    
    .customer-level-badge[b-h3l8xf2g7h] {
        position: static;
        margin: 12px 0;
        text-align: center;
        flex-direction: column;
        align-items: center;
    }
    
    .level-badge[b-h3l8xf2g7h] {
        font-size: 12px;
        padding: 6px 12px;
        border-radius: 20px;
    }
    
    .classification-badge[b-h3l8xf2g7h] {
        margin-top: 6px;
        font-size: 10px;
        padding: 3px 6px;
    }
}

/* Prevent horizontal scrolling globally */
*[b-h3l8xf2g7h] {
    box-sizing: border-box;
}

.profile-container[b-h3l8xf2g7h],
.content-grid[b-h3l8xf2g7h],
.main-column[b-h3l8xf2g7h],
.sidebar-column[b-h3l8xf2g7h] {
    max-width: 100%;
    overflow-x: hidden;
}

/* /Pages/SKUProfile.razor.rz.scp.css */
.sku-profile-container[b-xy659cj4rm] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 95%;
    margin: 2rem auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    padding: 2rem;
}

/* SKU Profile Header Styles - Futuristic & Modern */
.sku-profile-header[b-xy659cj4rm] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    animation: fadeIn-b-xy659cj4rm 0.8s ease-in-out;
    position: relative;
}

@keyframes fadeIn-b-xy659cj4rm {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sku-title[b-xy659cj4rm] {
    font-size: 2.2rem;
    font-weight: 800;
    color: #000;
    margin: 0;
    letter-spacing: -0.03em;
    position: relative;
    display: inline-block;
}

.sku-title[b-xy659cj4rm]::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #000, rgba(0, 0, 0, 0.2));
    border-radius: 3px;
}

.sku-details[b-xy659cj4rm] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.8rem;
    margin-top: 0.5rem;
    animation: slideIn-b-xy659cj4rm 0.6s ease-in-out 0.2s both;
}

@keyframes slideIn-b-xy659cj4rm {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.sku-detail-item[b-xy659cj4rm] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    position: relative;
}

.sku-detail-label[b-xy659cj4rm] {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sku-detail-value[b-xy659cj4rm] {
    font-size: 1.1rem;
    font-weight: 500;
    color: #000;
    padding: 0.4rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.sku-detail-value:hover[b-xy659cj4rm] {
    background: rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.sku-profile-filters[b-xy659cj4rm] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.sku-profile-date-range[b-xy659cj4rm] {
    font-size: 0.95rem;
    color: #555;
    margin-left: 1rem;
}

.sku-profile-stat-cards[b-xy659cj4rm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card[b-xy659cj4rm] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.stat-card:hover[b-xy659cj4rm] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Add subtle gradient background to stat cards */
    .stat-card[b-xy659cj4rm]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        opacity: 0.7;
    }

.stat-value.animating[b-xy659cj4rm] {
    /* remove blue glow, use subtle black glow */
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    /* keep the font color dark */
    color: #111827;
}

.stat-card.highlight[b-xy659cj4rm] {
    /* subtle light blue highlight */
    box-shadow: 0 8px 24px rgba(24, 119, 242, 0.15);
    border: 1px solid rgba(24, 119, 242, 0.2);
}


.stat-title[b-xy659cj4rm] {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
}

.stat-value[b-xy659cj4rm] {
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}


.sku-profile-chart[b-xy659cj4rm] {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8);
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 24px 28px;
    position: relative;
}

.sku-profile-chart canvas[b-xy659cj4rm] {
    height: 350px !important;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.1));
}

.sku-profile-table[b-xy659cj4rm] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04), 0 2px 10px rgba(0, 0, 0, 0.02);
    padding: 24px;
    margin-bottom: 30px;
    overflow-x: auto;
    animation: fadeIn-b-xy659cj4rm 0.8s ease-in-out 0.2s both;
}

.sku-profile-table-tabs[b-xy659cj4rm] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    position: relative;
}

.sku-profile-table-tabs[b-xy659cj4rm]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.05);
}

.sku-profile-table-tabs button[b-xy659cj4rm] {
    background: transparent;
    border: none;
    border-radius: 8px 8px 0 0;
    padding: 0.8rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    letter-spacing: 0.02em;
    overflow: hidden;
}

.sku-profile-table-tabs button[b-xy659cj4rm]::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: #000;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.sku-profile-table-tabs button:hover[b-xy659cj4rm] {
    color: rgba(0, 0, 0, 0.8);
    transform: translateY(-2px);
}

.sku-profile-table-tabs button:hover[b-xy659cj4rm]::before {
    width: 30%;
}

.sku-profile-table-tabs button.active[b-xy659cj4rm] {
    color: #000;
    background: transparent;
}

.sku-profile-table-tabs button.active[b-xy659cj4rm]::before {
    width: 60%;
}

.sku-profile-table-tabs button[b-xy659cj4rm]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.03);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
    border-radius: 8px 8px 0 0;
}

.sku-profile-table-tabs button:hover[b-xy659cj4rm]::after {
    transform: scaleX(1);
    transform-origin: left;
}

.sku-profile-table-tabs button.active[b-xy659cj4rm]::after {
    transform: scaleX(1);
    background: rgba(0, 0, 0, 0.05);
}

.table[b-xy659cj4rm] {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: 1px solid rgba(229,231,235,0.6);
}

.table th[b-xy659cj4rm] {
    background: linear-gradient(135deg, #f9fafb, #ffffff);
    color: #374151;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px 20px;
    text-align: center;
    border-bottom: 2px solid rgba(229,231,235,0.8);
    position: sticky;
    top: 0;
    z-index: 10;
}

.table td[b-xy659cj4rm] {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(229,231,235,0.4);
    font-size: 0.8rem;
    color: #374151;
    vertical-align: middle;
    text-align: center;
}

.table tbody tr:hover[b-xy659cj4rm] {
    background: linear-gradient(135deg, rgba(0,82,255,0.03), rgba(59,130,246,0.02));
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.table tbody tr:last-child td[b-xy659cj4rm] {
    border-bottom: none;
}

.sku-profile-pagination[b-xy659cj4rm] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.sku-profile-pagination .pagination-btn[b-xy659cj4rm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 2px solid #e5e7eb;
    background: #ffffff;
    color: #6b7280;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sku-profile-pagination .pagination-btn:hover:not(.disabled)[b-xy659cj4rm] {
    background: linear-gradient(145deg, #333333, #555555);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.sku-profile-pagination .pagination-btn.active[b-xy659cj4rm] {
    background: linear-gradient(145deg, #4b5563, #6b7280);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(75,85,99,0.4);
    border: 2px solid rgba(255,255,255,0.2);
}

.sku-profile-pagination .pagination-btn.disabled[b-xy659cj4rm] {
    opacity: 0.4;
    cursor: not-allowed;
    background: linear-gradient(145deg, #6b7280, #9ca3af);
    color: #d1d5db;
    transform: none !important;
    box-shadow: none !important;
}

.sku-profile-pagination .pagination-btn.page-number[b-xy659cj4rm] {
    min-width: 10px;
    width: auto;
    padding: 0 12px;
}

.sku-profile-table-footer[b-xy659cj4rm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.sku-profile-pagination-info[b-xy659cj4rm] {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 0;
}

@media (max-width: 645px) {
    .sku-profile-stat-cards[b-xy659cj4rm] {
        grid-template-columns: 1fr;
    }
    .sku-profile-table[b-xy659cj4rm] {
        padding: 10px;
    }
    .stat-card[b-xy659cj4rm] {
        align-items: stretch;
    }
    .sku-profile-chart[b-xy659cj4rm] {
        padding: 10px;
    }
    .sku-profile-header[b-xy659cj4rm] {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 1rem;
    }
    .sku-title[b-xy659cj4rm] {
        font-size: 1.8rem;
    }
    .sku-details[b-xy659cj4rm] {
        flex-direction: column;
        gap: 0.8rem;
        margin-top: 1rem;
    }
    .sku-detail-item[b-xy659cj4rm] {
        width: 100%;
    }
    .sku-detail-value[b-xy659cj4rm] {
        flex: 1;
        text-align: right;
    }
}

.sku-profile-loading[b-xy659cj4rm], .sku-profile-error[b-xy659cj4rm] {
    color: #e1306c;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    text-align: center;
}

/* Spinner overlay for full-page loading */
.sku-profile-spinner-overlay[b-xy659cj4rm] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 12px;
}
.sku-profile-spinner[b-xy659cj4rm] {
    width: 60px;
    height: 60px;
    border: 6px solid #e5e7eb;
    border-top: 6px solid #1877f2;
    border-radius: 50%;
    animation: sku-spin-b-xy659cj4rm 1s linear infinite;
}
@keyframes sku-spin-b-xy659cj4rm {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Remove error and no-data messages for chart/table */
.sku-profile-error[b-xy659cj4rm], .sku-profile-loading[b-xy659cj4rm] {
    display: none !important;
} 
/* /Pages/StructVariants.razor.rz.scp.css */
/* Ultra-Modern Struct Variants Explorer */

/* Full Page Loading Screen */
.full-page-loading[b-brs53eohm5] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, #0f0f0f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(20px);
}

.loading-content[b-brs53eohm5] {
    text-align: center;
    color: #ffffff;
    max-width: 400px;
    padding: 2rem;
}

.loading-icon[b-brs53eohm5] {
    margin-bottom: 2rem;
}

.loading-spinner-large[b-brs53eohm5] {
    width: 64px;
    height: 64px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top: 4px solid #10b981;
    border-radius: 50%;
    animation: spin-b-brs53eohm5 1.5s linear infinite;
    margin: 0 auto;
}

.loading-title[b-brs53eohm5] {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #ffffff;
    opacity: 0.9;
}

.loading-subtitle[b-brs53eohm5] {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
    font-weight: 400;
}

.loading-error[b-brs53eohm5] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    color: #fca5a5;
    font-size: 0.875rem;
}

/* Floating Navbar */
.floating-navbar[b-brs53eohm5] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-content[b-brs53eohm5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.nav-brand[b-brs53eohm5] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 600;
    font-size: 1.125rem;
    color: #ffffff;
}

.brand-icon[b-brs53eohm5] {
    width: 1.75rem;
    height: 1.75rem;
    color: #ffffff;
}

.brand-text[b-brs53eohm5] {
    color: #ffffff;
    opacity: 0.9;
}

.nav-menu[b-brs53eohm5] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-item[b-brs53eohm5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.nav-item svg[b-brs53eohm5] {
    width: 1rem;
    height: 1rem;
}

.nav-item:hover[b-brs53eohm5] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.nav-item.active[b-brs53eohm5] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.nav-actions[b-brs53eohm5] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-action-btn[b-brs53eohm5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.nav-action-btn svg[b-brs53eohm5] {
    width: 1rem;
    height: 1rem;
}

.nav-action-btn:hover[b-brs53eohm5] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

/* Main Container */
.struct-main-container[b-brs53eohm5] {
    background: #000000;
    min-height: 100vh;
    padding: 5rem 2rem 2rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #ffffff;
    position: relative;
}

.struct-main-container[b-brs53eohm5]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.015) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.01) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

/* Header Section */
.header-section[b-brs53eohm5] {
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.875rem 1.25rem;
    font-family: 'Fira Code', monospace;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
}

.header-content[b-brs53eohm5] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.icon-wrapper[b-brs53eohm5] {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-icon[b-brs53eohm5] {
    width: 24px;
    height: 24px;
    color: #ffffff;
    opacity: 0.8;
}

.page-title[b-brs53eohm5] {
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
    color: #ffffff;
    opacity: 0.9;
}

.page-subtitle[b-brs53eohm5] {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0.25rem 0 0 0;
    font-weight: 400;
}

.stats-grid[b-brs53eohm5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.stat-card[b-brs53eohm5] {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.875rem 1.25rem;
    text-align: center;
    font-family: 'Fira Code', monospace;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
}

.stat-label[b-brs53eohm5] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.stat-value[b-brs53eohm5] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    opacity: 0.9;
}

.text-success[b-brs53eohm5] { color: #10b981; }
.text-error[b-brs53eohm5] { color: #ef4444; }

/* Controls Section */
.controls-section[b-brs53eohm5] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
    align-items: center;
}

.search-container[b-brs53eohm5] {
    flex: 1;
    min-width: 280px;
}

.search-mode-toggle[b-brs53eohm5] {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    padding: 0.25rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    backdrop-filter: blur(8px);
}

.search-mode-toggle button[b-brs53eohm5] {
    flex: 1;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.search-mode-toggle button:hover[b-brs53eohm5] {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.8);
}

.search-mode-toggle button.active[b-brs53eohm5] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.input-group[b-brs53eohm5] {
    display: flex;
    gap: 0;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
    font-family: 'Fira Code', monospace;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
}

.input-group:focus-within[b-brs53eohm5] {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05);
}

.search-input[b-brs53eohm5] {
    flex: 1;
    background: transparent;
    border: none;
    padding: 0.875rem 1.25rem;
    color: #ffffff;
    opacity: 0.9;
    font-size: 0.9375rem;
    outline: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.search-input[b-brs53eohm5]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.search-button[b-brs53eohm5] {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    padding: 0.875rem 1.25rem;
    color: rgba(255, 255, 255, 0.7);
    opacity: 0.8;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Fira Code', monospace;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
}

.search-button:hover:not(:disabled)[b-brs53eohm5] {
    background: rgba(255, 255, 255, 0.08);
    opacity: 1;
}

.search-button:disabled[b-brs53eohm5] {
    opacity: 0.4;
    cursor: not-allowed;
}

.search-button svg[b-brs53eohm5] {
    width: 16px;
    height: 16px;
}

.action-buttons[b-brs53eohm5] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.action-btn[b-brs53eohm5] {
    padding: 0.625rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.8);
}

.action-btn.primary[b-brs53eohm5] {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.action-btn.secondary[b-brs53eohm5] {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.7);
}

.action-btn.danger[b-brs53eohm5] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.action-btn.info[b-brs53eohm5] {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

.action-btn.warning[b-brs53eohm5] {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.action-btn:hover:not(:disabled)[b-brs53eohm5] {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.action-btn:disabled[b-brs53eohm5] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* Error Alert */
.error-alert[b-brs53eohm5] {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: 8px;
    padding: 0.875rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #fca5a5;
    backdrop-filter: blur(8px);
}

.alert-icon[b-brs53eohm5] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Section Card */
.section-card[b-brs53eohm5] {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.section-header[b-brs53eohm5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.section-header h3[b-brs53eohm5] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #ffffff;
    opacity: 0.9;
}

.toggle-btn[b-brs53eohm5] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 0.375rem 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 0.8125rem;
    transition: all 0.2s ease;
    font-weight: 500;
}

.toggle-btn:hover[b-brs53eohm5] {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* IDs Grid */
.ids-grid[b-brs53eohm5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
}

.id-chip[b-brs53eohm5] {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    padding: 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Fira Code', monospace;
    font-size: 0.875rem;
    color: #e2e8f0;
}

.id-chip:hover[b-brs53eohm5] {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
    transform: translateY(-2px);
}

.id-chip.selected[b-brs53eohm5] {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-color: #1d4ed8;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.more-indicator[b-brs53eohm5] {
    background: rgba(100, 116, 139, 0.2);
    border-color: rgba(100, 116, 139, 0.3);
    cursor: default;
    color: #94a3b8;
    font-style: italic;
}

.more-indicator:hover[b-brs53eohm5] {
    transform: none;
}

/* Data Section */
.data-section[b-brs53eohm5] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Summary Card */
.summary-card[b-brs53eohm5] {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.875rem 1.25rem;
    font-family: 'Fira Code', monospace;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
}

.summary-header[b-brs53eohm5] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.variant-name[b-brs53eohm5] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    color: #ffffff;
    opacity: 0.9;
}

.variant-meta[b-brs53eohm5] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.brand-badge[b-brs53eohm5], .series-badge[b-brs53eohm5], .status-badge[b-brs53eohm5] {
    padding: 0.875rem 1.25rem;
    border-radius: 8px;
    font-family: 'Fira Code', monospace;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
}

.brand-badge[b-brs53eohm5] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    backdrop-filter: blur(4px);
}

.series-badge[b-brs53eohm5] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
    backdrop-filter: blur(4px);
}

.status-badge[b-brs53eohm5] {
    color: #ffffff;
    opacity: 0.9;
}

.status-published[b-brs53eohm5] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.status-draft[b-brs53eohm5] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.status-active[b-brs53eohm5] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.variant-id-display[b-brs53eohm5] {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.875rem 1.25rem;
    font-family: 'Fira Code', monospace;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
}

.summary-stats[b-brs53eohm5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.summary-stat[b-brs53eohm5] {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    backdrop-filter: blur(4px);
}

.summary-stat .stat-label[b-brs53eohm5] {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.summary-stat .stat-value[b-brs53eohm5] {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    opacity: 0.9;
}

/* Tabs */
.tabs-container[b-brs53eohm5] {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
}

.tabs-header[b-brs53eohm5] {
    display: flex;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
}

.tab[b-brs53eohm5] {
    background: transparent;
    border: none;
    padding: 0.875rem 1.25rem;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    font-weight: 500;
    font-size: 0.875rem;
}

.tab:hover[b-brs53eohm5] {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.8);
}

.tab.active[b-brs53eohm5] {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.8);
}

.tab-content[b-brs53eohm5] {
    padding: 1.5rem;
}

.data-card[b-brs53eohm5] {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.25rem;
    backdrop-filter: blur(8px);
}

.data-card h4[b-brs53eohm5] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.data-card h4[b-brs53eohm5]::before {
    content: '';
    width: 4px;
    height: 16px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.data-grid[b-brs53eohm5] {
    display: grid;
    gap: 0.75rem;
}

.data-item[b-brs53eohm5] {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.data-item:last-child[b-brs53eohm5] {
    border-bottom: none;
}

.data-label[b-brs53eohm5] {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.data-value[b-brs53eohm5] {
    color: #ffffff;
    opacity: 0.9;
    font-family: 'Fira Code', monospace;
    font-size: 0.8125rem;
    word-break: break-all;
}

.json-display[b-brs53eohm5] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 1.25rem;
    font-family: 'Fira Code', monospace;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-x: auto;
    max-height: 500px;
    overflow-y: auto;
    backdrop-filter: blur(4px);
    position: relative;
}

.json-display[b-brs53eohm5]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.json-display[b-brs53eohm5]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.json-display[b-brs53eohm5]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.json-display[b-brs53eohm5]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.json-display[b-brs53eohm5]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.json-display-preview[b-brs53eohm5] {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 1rem;
    font-family: 'Fira Code', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-x: auto;
    max-height: 250px;
    overflow-y: auto;
    backdrop-filter: blur(4px);
}

.json-display-preview[b-brs53eohm5]::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.json-display-preview[b-brs53eohm5]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 2px;
}

.json-display-preview[b-brs53eohm5]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

.json-preview[b-brs53eohm5] {
    margin-top: 1rem;
}

/* Spinner */
.spinner[b-brs53eohm5] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: spin-b-brs53eohm5 1s linear infinite;
}

@keyframes spin-b-brs53eohm5 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Image Gallery */
.image-gallery[b-brs53eohm5] {
    margin: 1rem 0;
}

.image-gallery h4[b-brs53eohm5] {
    margin: 0 0 1rem 0;
    color: #e2e8f0;
    font-size: 1.25rem;
    font-weight: 600;
}

.images-grid[b-brs53eohm5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.image-item[b-brs53eohm5] {
    position: relative;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.image-item:hover[b-brs53eohm5] {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
    border-color: #3b82f6;
}

.variant-image[b-brs53eohm5] {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.image-item:hover .variant-image[b-brs53eohm5] {
    transform: scale(1.05);
}

.image-overlay[b-brs53eohm5] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
    padding: 1rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.image-item:hover .image-overlay[b-brs53eohm5] {
    transform: translateY(0);
}

.image-type[b-brs53eohm5] {
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.25rem;
}

.media-id[b-brs53eohm5] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    font-family: 'Fira Code', monospace;
    display: block;
}

/* Image Modal */
.image-modal[b-brs53eohm5] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.image-modal-content[b-brs53eohm5] {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    background: rgba(30, 41, 59, 0.3);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.modal-image[b-brs53eohm5] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 80vw;
    max-height: 80vh;
}

.modal-close[b-brs53eohm5] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(239, 68, 68, 0.8);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1001;
}

.modal-close:hover[b-brs53eohm5] {
    background: rgba(239, 68, 68, 1);
    transform: scale(1.1);
}

/* Brand Description Styles */
.brand-description-item[b-brs53eohm5] {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    backdrop-filter: blur(4px);
}

.brand-description-item strong[b-brs53eohm5] {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}

.brand-description-item p[b-brs53eohm5] {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    margin: 0;
    font-size: 0.875rem;
}

.brand-description-item:last-child[b-brs53eohm5] {
    margin-bottom: 0;
}

/* Enhanced Image Gallery */
.variant-image[b-brs53eohm5] {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.image-item:hover .variant-image[b-brs53eohm5] {
    transform: scale(1.05);
}

.image-overlay[b-brs53eohm5] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
    padding: 1rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.image-item:hover .image-overlay[b-brs53eohm5] {
    transform: translateY(0);
}

.image-type[b-brs53eohm5] {
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.25rem;
}

.media-id[b-brs53eohm5] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    font-family: 'Fira Code', monospace;
    display: block;
}

/* Responsive Design */
@media (max-width: 768px) {
    .struct-main-container[b-brs53eohm5] {
        padding: 1rem;
        margin-top: 4rem;
    }

    .header-content[b-brs53eohm5] {
        flex-direction: column;
        text-align: center;
    }

    .page-title[b-brs53eohm5] {
        font-size: 2rem;
    }

    .controls-section[b-brs53eohm5] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-container[b-brs53eohm5] {
        min-width: auto;
    }

    .summary-header[b-brs53eohm5] {
        flex-direction: column;
        align-items: flex-start;
    }

    .data-item[b-brs53eohm5] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .tabs-header[b-brs53eohm5] {
        justify-content: flex-start;
    }

    .tab[b-brs53eohm5] {
        flex-shrink: 0;
    }

    .images-grid[b-brs53eohm5] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .variant-image[b-brs53eohm5] {
        height: 150px;
    }

    .image-modal-content[b-brs53eohm5] {
        max-width: 95vw;
        max-height: 95vh;
    }

    .modal-image[b-brs53eohm5] {
        max-width: 90vw;
        max-height: 90vh;
    }

    .brand-description-item[b-brs53eohm5] {
        margin-bottom: 0.75rem;
        padding: 0.5rem;
    }

    .brand-description-item p[b-brs53eohm5] {
        font-size: 0.8125rem;
    }
}

/* Variant Navigation */
.variant-navigation[b-brs53eohm5] {
    margin: 1.5rem 0;
    padding: 0.875rem 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    font-family: 'Fira Code', monospace;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
}

.variant-navigation h4[b-brs53eohm5] {
    color: #f1f5f9;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.variant-navigation h4[b-brs53eohm5]::before {
    content: "🔄";
    font-size: 1rem;
}

.variant-tabs[b-brs53eohm5] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    max-height: 200px;
    overflow-y: auto;
}

.variant-tab[b-brs53eohm5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.875rem 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Fira Code', monospace;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
    text-align: center;
    backdrop-filter: blur(4px);
}

.variant-tab:hover[b-brs53eohm5] {
    background: #475569;
    border-color: #64748b;
    transform: translateY(-1px);
}

.variant-tab.active[b-brs53eohm5] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #10b981;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.tab-item-number[b-brs53eohm5] {
    font-weight: 700;
    font-size: 0.875rem;
    color: #f1f5f9;
}

.variant-tab.active .tab-item-number[b-brs53eohm5] {
    color: #ffffff;
}

.tab-variant-name[b-brs53eohm5] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.25rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.variant-tab.active .tab-variant-name[b-brs53eohm5] {
    color: #ecfdf5;
}

/* Current Variant Highlighting */
.variant-card.current-variant[b-brs53eohm5] {
    border: 2px solid #10b981;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
    position: relative;
}

.current-variant-indicator[b-brs53eohm5] {
    position: absolute;
    top: -10px;
    right: -10px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    padding: 0.5rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    z-index: 10;
}

.current-variant-indicator svg[b-brs53eohm5] {
    width: 14px;
    height: 14px;
}

/* Enhanced Variant Details */
.variant-details[b-brs53eohm5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.detail-item[b-brs53eohm5] {
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.875rem 1.25rem;
    border-radius: 8px;
    font-family: 'Fira Code', monospace;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
}

/* Variant Details Section */
.variant-details-section[b-brs53eohm5] {
    margin: 1rem 0;
    padding: 0.875rem 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    font-family: 'Fira Code', monospace;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
}

.variant-details-section h4[b-brs53eohm5] {
    color: #f1f5f9;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.variant-details-section h4[b-brs53eohm5]::before {
    content: "ℹ️";
    font-size: 1rem;
}

.variant-details-grid[b-brs53eohm5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.detail-item[b-brs53eohm5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'Fira Code', monospace;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
}

.detail-label[b-brs53eohm5] {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Fira Code', monospace;
    font-size: 0.875rem;
}

.detail-value[b-brs53eohm5] {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    font-family: 'Fira Code', monospace;
    font-size: 0.875rem;
    text-align: right;
    word-break: break-word;
}

/* Culture Descriptions */
.culture-descriptions[b-brs53eohm5] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.culture-description[b-brs53eohm5] {
    padding: 0.875rem 1.25rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'Fira Code', monospace;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
}

.culture-code[b-brs53eohm5] {
    font-weight: 600;
    color: #10b981;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.culture-text[b-brs53eohm5] {
    color: #f1f5f9;
    line-height: 1.6;
    font-size: 0.9rem;
}

/* Current Variant Images */
.current-variant-images[b-brs53eohm5] {
    margin: 0.6rem 0;
    padding: 0.875rem 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    font-family: 'Fira Code', monospace;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
}

.current-variant-images h3[b-brs53eohm5] {
    color: #f1f5f9;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.current-variant-images h3[b-brs53eohm5]::before {
    content: "🖼️";
    font-size: 1.25rem;
}

.image-gallery[b-brs53eohm5] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.gallery-image-item[b-brs53eohm5] {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}

.gallery-image-item:hover[b-brs53eohm5] {
    border-color: #10b981;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.2);
}

.gallery-image-item.loading[b-brs53eohm5] {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.gallery-image[b-brs53eohm5] {
    width: 200px;
    height: 200px;
    object-fit: cover;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gallery-image:hover[b-brs53eohm5] {
    transform: scale(1.05);
}


.image-placeholder[b-brs53eohm5] {
    text-align: center;
    color: #94a3b8;
    font-size: 0.875rem;
}

.image-placeholder span[b-brs53eohm5] {
    display: block;
    margin-bottom: 0.25rem;
}

.image-placeholder small[b-brs53eohm5] {
    font-family: 'Courier New', monospace;
    color: #64748b;
}


.action-btn[b-brs53eohm5] {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover[b-brs53eohm5] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Enhanced Variant Cards */
.variant-card.current-variant[b-brs53eohm5] {
    position: relative;
}

.current-variant-indicator[b-brs53eohm5] {
    position: absolute;
    top: -10px;
    right: -10px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    padding: 0.5rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    z-index: 10;
}

.current-variant-indicator svg[b-brs53eohm5] {
    width: 14px;
    height: 14px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .variant-tabs[b-brs53eohm5] {
        gap: 0.25rem;
    }

    .variant-tab[b-brs53eohm5] {
        min-width: 100px;
        padding: 0.5rem 0.75rem;
    }

    .tab-item-number[b-brs53eohm5] {
        font-size: 0.8125rem;
    }

    .tab-variant-name[b-brs53eohm5] {
        font-size: 0.6875rem;
    }

    .variant-details-grid[b-brs53eohm5] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .detail-item[b-brs53eohm5] {
        padding: 0.5rem 0.75rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .detail-value[b-brs53eohm5] {
        text-align: left;
    }

    .image-gallery[b-brs53eohm5] {
        flex-direction: column;
        align-items: center;
    }

    .gallery-image[b-brs53eohm5] {
        width: 150px;
        height: 150px;
    }
}
/* /Pages/TotalCustomers.razor.rz.scp.css */
/* Sales search container styling */
.sales-search-container[b-n2r8691a01] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.search-controls[b-n2r8691a01] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-size-selector[b-n2r8691a01] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.page-size-dropdown[b-n2r8691a01] {
    padding: 4px 8px;
    border: 1px solid var(--lv-border-primary, #e5e7eb);
    border-radius: var(--lv-border-radius, 10px);
    background: var(--lv-background-primary, #ffffff);
    font-size: var(--lv-font-size-small, 12px);
    min-width: 60px;
}

/* Pagination styling - matching CustomerClassification */
.table-footer[b-n2r8691a01] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lv-border-primary, #e5e7eb);
}

.pagination-info[b-n2r8691a01] {
    flex: 1;
}

.pagination-info p[b-n2r8691a01] {
    margin: 0;
    font-size: var(--lv-font-size-small, 12px);
    color: var(--lv-text-secondary, #6b7280);
}

.pagination-controls[b-n2r8691a01] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pagination-btn[b-n2r8691a01] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--lv-border-primary, #e5e7eb);
    border-radius: var(--lv-border-radius, 10px);
    background: var(--lv-background-primary, #ffffff);
    color: var(--lv-text-primary, #374151);
    cursor: pointer;
    font-size: var(--lv-font-size-small, 12px);
    font-weight: 600;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(.disabled)[b-n2r8691a01] {
    background: var(--lv-hover-background, #f9fafb);
    border-color: var(--lv-background-accent, #000000);
    color: var(--lv-background-accent, #000000);
}

.pagination-btn.active[b-n2r8691a01] {
    background: var(--lv-background-accent, #000000);
    color: var(--lv-text-inverted, #ffffff);
    border-color: var(--lv-background-accent, #000000);
}

.pagination-btn.disabled[b-n2r8691a01] {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--lv-background-secondary, #f8fafc);
    color: var(--lv-text-disabled, #9ca3af);
}

.page-number[b-n2r8691a01] {
    min-width: 32px;
}

/* Mobile pagination styling */
@media (max-width: 646px) {
    /* Smaller pagination buttons */
    .pagination-btn[b-n2r8691a01] {
        width: 28px;
        height: 28px;
        font-size: 11px;
        border-width: 1px;
    }

    .pagination-btn.page-number[b-n2r8691a01] {
        min-width: 28px;
        padding: 0 4px;
    }

    .pagination-controls[b-n2r8691a01] {
        gap: 2px;
    }

    /* Stack table footer vertically on mobile */
    .table-footer[b-n2r8691a01] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .pagination-info[b-n2r8691a01] {
        text-align: center;
        order: 2;
    }

    .pagination-controls[b-n2r8691a01] {
        justify-content: center;
        order: 1;
    }

    /* Responsive search container */
    .sales-search-container[b-n2r8691a01] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .search-controls[b-n2r8691a01] {
        justify-content: center;
    }

    .page-size-selector[b-n2r8691a01] {
        justify-content: center;
    }
}
/* /Pages/Wkno.razor.rz.scp.css */
/* Black Week toggle loading states */
.black-week-toggle.loading[b-2mc3fk5djy] {
    opacity: 0.7;
    cursor: wait;
    pointer-events: none;
}

.black-week-toggle.loading:disabled[b-2mc3fk5djy] {
    opacity: 0.7;
}

/* Button spinner animation */
.button-spinner[b-2mc3fk5djy] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: button-spin-b-2mc3fk5djy 0.6s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes button-spin-b-2mc3fk5djy {
    to {
        transform: rotate(360deg);
    }
}

.black-week-toggle:not(.active) .button-spinner[b-2mc3fk5djy] {
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: currentColor;
}