npm - @visns-studio/visns-components - Versions diffs - 5.10.8 → 5.10.10 - Mend

@visns-studio/visns-components 5.10.8 → 5.10.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/package.json +4 -4
package/src/components/crm/client/ClientPortal.jsx +53 -20
package/src/components/crm/generic/GenericReport.jsx +4689 -5622
package/src/components/crm/generic/styles/GenericClientPortal.module.scss +6 -4
package/src/components/crm/generic/styles/GenericReport.module.scss +2191 -1568
package/src/index.js +0 -2
package/src/components/crm/generic/GenericReportImproved.jsx +0 -5280
package/src/components/crm/generic/styles/GenericReportImproved.module.scss +0 -2631

package/src/components/crm/generic/styles/GenericReportImproved.module.scss DELETED Viewed

@@ -1,2631 +0,0 @@
-// Use project root CSS variables instead of local SCSS variables
-// This allows the component to adapt to different project themes
-// Main container
-.reportBuilder {
-    width: 100%;
-    min-height: 100vh;
-    background-color: var(--bg-color);
-}
-// Header
-.header {
-    background-color: var(--tertiary-color);
-    border-bottom: 1px solid var(--border-color);
-    padding: var(--padding) calc(var(--padding) * 1.5);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    box-shadow: var(--box-shadow-small);
-    position: sticky;
-    top: 0;
-    z-index: 100;
-}
-.headerLeft {
-    display: flex;
-    align-items: center;
-    gap: var(--padding);
-    h1 {
-        margin: 0;
-        font-size: 1.5rem;
-        font-weight: var(--title-weight);
-        color: var(--header-color);
-    }
-}
-.helpButton {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    background-color: var(--bg-color);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius);
-    padding: 8px var(--padding);
-    font-size: 0.875rem;
-    color: var(--paragraph-color);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    &:hover {
-        background-color: var(--bg-color);
-        color: var(--header-color);
-        box-shadow: var(--box-shadow-small);
-        filter: brightness(0.95);
-    }
-    svg {
-        color: var(--primary-color);
-    }
-}
-.headerRight {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-}
-// Mode toggle
-.modeToggle {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 8px;
-    background-color: var(--bg-color);
-    border-radius: var(--radius);
-    span {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        font-size: 0.875rem;
-        color: var(--paragraph-color);
-        transition: color 0.2s ease;
-        &.active {
-            color: var(--header-color);
-            font-weight: 500;
-        }
-    }
-}
-.switch {
-    position: relative;
-    display: inline-block;
-    width: 44px;
-    height: 24px;
-    input {
-        opacity: 0;
-        width: 0;
-        height: 0;
-        &:checked + .slider {
-            background-color: var(--primary-color);
-            &:before {
-                transform: translateX(20px);
-            }
-        }
-    }
-}
-.slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: var(--border-color);
-    transition: 0.3s;
-    border-radius: 24px;
-    &:before {
-        position: absolute;
-        content: '';
-        height: 18px;
-        width: 18px;
-        left: 3px;
-        bottom: 3px;
-        background-color: var(--tertiary-color);
-        transition: 0.3s;
-        border-radius: 50%;
-        box-shadow: var(--box-shadow-small);
-    }
-}
-// Content
-.content {
-    padding: 24px;
-}
-// Template Selection
-.templateSelection {
-    max-width: 1200px;
-    margin: 0 auto;
-}
-.templateHeader {
-    text-align: center;
-    margin-bottom: 40px;
-    h2 {
-        font-size: 2rem;
-        font-weight: 700;
-        color: var(--header-color);
-        margin-bottom: 12px;
-    }
-    p {
-        font-size: 1.125rem;
-        color: var(--paragraph-color);
-    }
-}
-.templateCategories {
-    display: grid;
-    gap: 32px;
-}
-.templateCategory {
-    background-color: var(--tertiary-color);
-    border-radius: var(--radius);
-    padding: 24px;
-    box-shadow: var(--box-shadow-small);
-    border: 1px solid var(--border-color);
-}
-.categoryHeader {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 20px;
-    svg {
-        color: var(--primary-color);
-    }
-    h3 {
-        margin: 0;
-        font-size: 1.25rem;
-        font-weight: 600;
-        color: var(--header-color);
-    }
-}
-.templateGrid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-    gap: 16px;
-}
-.templateCard {
-    background-color: var(--bg-color);
-    border: 2px solid transparent;
-    border-radius: var(--radius);
-    padding: 20px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    text-align: center;
-    &:hover {
-        border-color: var(--primary-color);
-        background-color: var(--tertiary-color);
-        box-shadow: var(--box-shadow-small);
-        transform: translateY(-2px);
-    }
-    svg {
-        color: var(--primary-color);
-        margin-bottom: 12px;
-    }
-    h4 {
-        margin: 0 0 8px 0;
-        font-size: 1rem;
-        font-weight: 600;
-        color: var(--header-color);
-    }
-    p {
-        margin: 0;
-        font-size: 0.875rem;
-        color: var(--paragraph-color);
-        line-height: 1.4;
-    }
-}
-.customTemplate {
-    background: linear-gradient(
-        135deg,
-        var(--primary-color) 0%,
-        var(--primary-color) 100%
-    );
-    color: var(--tertiary-color);
-    border-radius: var(--radius);
-    padding: 32px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 200px;
-    &:hover {
-        box-shadow: var(--box-shadow-large);
-        transform: translateY(-2px);
-    }
-    svg {
-        color: var(--tertiary-color);
-        margin-bottom: 16px;
-    }
-    h4 {
-        margin: 0 0 8px 0;
-        font-size: 1.25rem;
-        font-weight: 700;
-    }
-    p {
-        margin: 0;
-        font-size: 0.875rem;
-        opacity: 0.9;
-    }
-}
-// Reports Dashboard
-.reportsDashboard {
-    max-width: 800px;
-    margin: 0 auto;
-}
-.newReportSection {
-    margin-bottom: 32px;
-}
-.newReportCard {
-    background: linear-gradient(
-        135deg,
-        var(--primary-color) 0%,
-        var(--primary-color) 100%
-    );
-    color: var(--tertiary-color);
-    border-radius: var(--radius);
-    padding: 32px;
-    text-align: center;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border: none;
-    &:hover {
-        transform: translateY(-2px);
-        box-shadow: var(--box-shadow-large);
-    }
-    svg {
-        margin-bottom: 16px;
-    }
-    h4 {
-        margin: 0 0 8px 0;
-        font-size: 1.25rem;
-        font-weight: 700;
-        color: var(--tertiary-color);
-    }
-    p {
-        margin: 0;
-        opacity: 0.9;
-        font-size: 0.875rem;
-        color: var(--tertiary-color);
-    }
-}
-.savedReportsSection {
-    h3 {
-        margin: 0 0 16px 0;
-        font-size: 1.125rem;
-        font-weight: 600;
-        color: var(--header-color);
-    }
-}
-.reportsGrid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    gap: 16px;
-}
-.reportCard {
-    background-color: var(--tertiary-color);
-    border: 2px solid var(--border-color);
-    border-radius: var(--radius);
-    overflow: hidden;
-    transition: all 0.2s ease;
-    position: relative;
-    &:hover {
-        border-color: var(--primary-color);
-        box-shadow: var(--box-shadow-small);
-        transform: translateY(-2px);
-    }
-    .reportCardContent {
-        padding: 16px;
-        cursor: pointer;
-        min-height: 120px;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-    }
-    .reportHeader {
-        margin-bottom: 12px;
-        h4 {
-            margin: 0 0 8px 0;
-            font-size: 1rem;
-            font-weight: 600;
-            color: var(--header-color);
-            line-height: 1.3;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-        .reportMeta {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            font-size: 0.75rem;
-            color: var(--paragraph-color);
-            .reportVisibility {
-                font-size: 0.875rem;
-            }
-            .reportDate {
-                color: var(--paragraph-color);
-            }
-        }
-    }
-    .reportTableInfo {
-        margin-bottom: 12px;
-        .reportTable {
-            display: inline-block;
-            font-size: 0.75rem;
-            background-color: var(--bg-color);
-            color: var(--paragraph-color);
-            padding: 4px 8px;
-            border-radius: var(--radius);
-            border: 1px solid var(--border-color);
-        }
-    }
-    .reportClickHint {
-        font-size: 0.75rem;
-        color: var(--paragraph-color);
-        font-style: italic;
-        margin-top: auto;
-    }
-    .reportActions {
-        position: absolute;
-        top: 8px;
-        right: 8px;
-        .deleteReportBtn {
-            width: 24px;
-            height: 24px;
-            border-radius: 50%;
-            background-color: rgba(var(--approval-color), 0.1);
-            border: 1px solid rgba(var(--approval-color), 0.2);
-            color: var(--approval-color);
-            font-size: 16px;
-            font-weight: bold;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.2s ease;
-            opacity: 0.7;
-            &:hover {
-                background-color: var(--approval-color);
-                color: var(--tertiary-color);
-                opacity: 1;
-                transform: scale(1.1);
-            }
-        }
-    }
-}
-.noReports {
-    text-align: center;
-    padding: 48px 24px;
-    color: var(--paragraph-color);
-    svg {
-        color: var(--paragraph-color);
-        margin-bottom: 16px;
-    }
-    h3 {
-        margin: 0 0 8px 0;
-        color: var(--header-color);
-    }
-    p {
-        margin: 0;
-        max-width: 400px;
-        margin: 0 auto;
-    }
-}
-// Wizard Mode
-.wizardMode {
-    max-width: 1400px; // Expanded from 1000px to fit more content
-    margin: 0 auto;
-}
-.wizardProgress {
-    background-color: var(--tertiary-color);
-    border-radius: var(--radius);
-    padding: 20px;
-    margin-bottom: 24px;
-    box-shadow: var(--box-shadow-small);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    position: relative;
-    gap: 16px;
-    // Remove the line - we'll use arrows instead
-    &::before {
-        display: none;
-    }
-}
-.wizardStep {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    cursor: pointer;
-    position: relative;
-    z-index: 1;
-    transition: all 0.2s ease;
-    flex: 1;
-    max-width: 200px;
-    // Add arrow after each step except the last
-    &:not(:last-child)::after {
-        content: '→';
-        position: absolute;
-        right: -20px;
-        top: 20px; // Align with step icon center
-        color: var(--border-color);
-        font-size: 20px;
-        font-weight: bold;
-        z-index: 1;
-        transition: color 0.2s ease;
-    }
-    &.active {
-        background-color: rgba(var(--primary-rgb), 0.05);
-        border-radius: var(--radius);
-        padding: 12px 8px;
-        transform: scale(1.02);
-        .stepIcon {
-            background-color: var(--primary-color);
-            color: var(--tertiary-color);
-            box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.15);
-            border: 3px solid var(--tertiary-color);
-            width: 48px;
-            height: 48px;
-            font-size: 1.1em;
-        }
-        .stepTitle {
-            color: var(--primary-color);
-            font-weight: 700;
-            font-size: 0.95em;
-        }
-        .stepDescription {
-            color: var(--primary-color);
-            opacity: 0.8;
-        }
-        // Color the arrow after active step
-        &:not(:last-child)::after {
-            color: var(--primary-color);
-            font-weight: bold;
-        }
-    }
-    &.complete {
-        .stepIcon {
-            background-color: rgba(var(--color-valid), 1);
-            color: var(--tertiary-color);
-            border: 2px solid rgba(var(--color-valid), 0.3);
-        }
-        .stepTitle {
-            color: rgba(var(--color-valid), 1);
-            font-weight: 600;
-        }
-        .stepDescription {
-            color: rgba(var(--color-valid), 1);
-            opacity: 0.7;
-        }
-        // Color the arrow after completed step
-        &:not(:last-child)::after {
-            color: rgba(var(--color-valid), 1);
-        }
-    }
-    &:hover:not(.active) {
-        background-color: rgba(var(--primary-rgb), 0.02);
-        border-radius: var(--radius);
-        padding: 8px;
-        .stepIcon {
-            transform: scale(1.05);
-            background-color: rgba(var(--primary-rgb), 0.1);
-            color: var(--primary-color);
-        }
-        .stepTitle {
-            color: var(--primary-color);
-        }
-    }
-}
-.stepIcon {
-    width: 40px; // Reduced from 48px for more compact look
-    height: 40px;
-    border-radius: 50%;
-    background-color: var(--tertiary-color);
-    border: 2px solid var(--border-color);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s ease;
-}
-.stepInfo {
-    text-align: center;
-    .stepTitle {
-        display: block;
-        font-size: 0.875rem;
-        font-weight: 500;
-        color: var(--paragraph-color);
-        margin-bottom: 2px;
-    }
-    .stepDescription {
-        display: block;
-        font-size: 0.75rem;
-        color: var(--paragraph-color);
-        max-width: 150px;
-        line-height: 1.3;
-    }
-}
-.wizardContent {
-    background-color: var(--tertiary-color);
-    border-radius: var(--radius);
-    box-shadow: var(--box-shadow-small);
-    overflow: hidden;
-}
-.stepHeader {
-    display: flex;
-    align-items: center;
-    gap: 24px;
-    padding: 24px 32px;
-    border-bottom: 1px solid var(--border-color);
-    background: linear-gradient(
-        135deg,
-        var(--primary-color) 0%,
-        var(--primary-color) 100%
-    );
-    color: var(--tertiary-color);
-    .stepNumber {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 48px;
-        height: 48px;
-        background-color: rgba(255, 255, 255, 0.2);
-        border-radius: 50%;
-        font-size: 1.5rem;
-        font-weight: 700;
-        color: var(--tertiary-color);
-    }
-    .stepHeaderContent {
-        display: flex;
-        align-items: center;
-        gap: 16px;
-        flex: 1;
-        .stepIcon {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 40px;
-            height: 40px;
-            background-color: rgba(255, 255, 255, 0.15);
-            border-radius: var(--radius);
-            svg {
-                color: var(--tertiary-color);
-            }
-        }
-        .stepHeaderText {
-            h2 {
-                margin: 0 0 4px 0;
-                font-size: 1.5rem;
-                font-weight: 700;
-                color: var(--tertiary-color);
-            }
-            p {
-                margin: 0;
-                font-size: 1rem;
-                color: rgba(255, 255, 255, 0.9);
-            }
-        }
-    }
-}
-.stepGuidance {
-    padding: 20px 32px;
-    background-color: rgba(var(--primary-rgb), 0.05);
-    border-top: 1px solid var(--border-color);
-    border-bottom: 1px solid var(--border-color);
-    .guidanceContent {
-        h3 {
-            margin: 0 0 16px 0;
-            font-size: 1.125rem;
-            font-weight: 600;
-            color: var(--header-color);
-        }
-        .howToSteps {
-            margin-bottom: 16px;
-            h4 {
-                margin: 0 0 8px 0;
-                font-size: 0.875rem;
-                font-weight: 600;
-                color: var(--paragraph-color);
-                text-transform: uppercase;
-                letter-spacing: 0.5px;
-            }
-            ol {
-                margin: 0;
-                padding-left: 20px;
-                color: var(--paragraph-color);
-                li {
-                    margin-bottom: 4px;
-                    font-size: 0.875rem;
-                    line-height: 1.4;
-                }
-            }
-        }
-        .guidanceTip {
-            display: flex;
-            align-items: flex-start;
-            gap: 8px;
-            padding: 12px;
-            background-color: rgba(var(--color-alert), 0.1);
-            border: 1px solid rgba(var(--color-alert), 0.2);
-            border-radius: var(--radius);
-            svg {
-                color: rgba(var(--color-alert), 1);
-                flex-shrink: 0;
-                margin-top: 2px;
-            }
-            span {
-                font-size: 0.875rem;
-                color: var(--header-color);
-            }
-        }
-    }
-}
-.stepBody {
-    padding: 32px;
-    min-height: 500px; // Increased from 400px to accommodate grid layout
-}
-.wizardNavigation {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 24px 32px;
-    border-top: 1px solid var(--border-color);
-    background-color: var(--bg-color);
-    gap: 16px;
-    .btn {
-        min-width: 120px;
-        padding: 12px 24px;
-        font-weight: 600;
-        transition: all 0.2s ease;
-        &:focus {
-            outline: 2px solid rgba(var(--primary-rgb), 0.3);
-            outline-offset: 2px;
-        }
-    }
-}
-// Table Selection
-.tableSelection {
-    .noTables {
-        text-align: center;
-        padding: 48px 24px;
-        color: var(--paragraph-color);
-        svg {
-            color: var(--paragraph-color);
-            margin-bottom: 16px;
-        }
-        h3 {
-            margin: 0 0 8px 0;
-            color: var(--header-color);
-        }
-        p {
-            margin: 0;
-            max-width: 400px;
-            margin: 0 auto;
-        }
-    }
-    .simpleTableList {
-        max-width: 100%; // Use full width instead of 600px
-        margin: 0 auto;
-        .tableListHeader {
-            text-align: center;
-            margin-bottom: 24px;
-            h3 {
-                margin: 0 0 8px 0;
-                font-size: 1.25rem;
-                font-weight: 600;
-                color: var(--header-color);
-            }
-            p {
-                margin: 0;
-                color: var(--paragraph-color);
-                font-size: 0.875rem;
-            }
-        }
-        .tableGrid {
-            display: grid;
-            grid-template-columns: repeat(
-                auto-fill,
-                minmax(220px, 1fr)
-            ); // Reduced from 280px for more compact
-            gap: 12px; // Reduced from 16px
-        }
-        .tableCard {
-            display: flex;
-            flex-direction: column;
-            padding: 16px; // Reduced from 20px
-            background-color: var(--tertiary-color);
-            border: 2px solid var(--border-color);
-            border-radius: var(--radius);
-            cursor: pointer;
-            transition: all 0.2s ease;
-            text-align: center;
-            position: relative;
-            min-height: 120px; // Reduced from 140px
-            &:hover {
-                border-color: var(--primary-color);
-                box-shadow: var(--box-shadow-small);
-                transform: translateY(-2px);
-            }
-            &.selected {
-                border-color: var(--primary-color);
-                background-color: rgba(var(--primary-rgb), 0.05);
-                box-shadow: var(--box-shadow-small);
-            }
-            .tableCardIcon {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 40px; // Reduced from 48px
-                height: 40px;
-                background-color: rgba(var(--primary-rgb), 0.1);
-                border-radius: var(--radius);
-                margin: 0 auto 12px auto; // Reduced from 16px
-                flex-shrink: 0;
-                svg {
-                    color: var(--primary-color);
-                }
-            }
-            .tableCardInfo {
-                flex: 1;
-                h4 {
-                    margin: 0 0 6px 0; // Reduced from 8px
-                    font-size: 0.9rem; // Reduced from 1rem
-                    font-weight: 600;
-                    color: var(--header-color);
-                    line-height: 1.2;
-                }
-                p {
-                    margin: 0;
-                    font-size: 0.7rem; // Reduced from 0.75rem
-                    color: var(--paragraph-color);
-                    line-height: 1.3; // Reduced from 1.4
-                    display: -webkit-box;
-                    -webkit-line-clamp: 2; // Reduced from 3 lines
-                    -webkit-box-orient: vertical;
-                    overflow: hidden;
-                }
-            }
-            .tableCardCheck {
-                position: absolute;
-                top: 12px;
-                right: 12px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 24px;
-                height: 24px;
-                background-color: var(--primary-color);
-                border-radius: 50%;
-                color: var(--tertiary-color);
-                svg {
-                    color: var(--tertiary-color);
-                }
-            }
-        }
-        .selectedTableInfo {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            margin-top: 16px;
-            padding: 12px;
-            background-color: rgba(var(--color-valid), 0.1);
-            border: 1px solid rgba(var(--color-valid), 0.2);
-            border-radius: var(--radius);
-            color: rgba(var(--color-valid), 1);
-            font-weight: 500;
-            font-size: 0.875rem;
-            svg {
-                color: rgba(var(--color-valid), 1);
-            }
-        }
-    }
-}
-.tableCategory {
-    margin-bottom: 32px;
-    h3 {
-        margin: 0 0 16px 0;
-        font-size: 1.125rem;
-        font-weight: 600;
-        color: var(--header-color);
-    }
-}
-.tableGrid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-    gap: 12px;
-}
-.tableCard {
-    background-color: var(--bg-color);
-    border: 2px solid transparent;
-    border-radius: var(--radius);
-    padding: 16px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    position: relative;
-    &:hover {
-        border-color: var(--primary-color);
-        background-color: var(--tertiary-color);
-        box-shadow: var(--box-shadow-small);
-    }
-    &.selected {
-        border-color: var(--primary-color);
-        background-color: rgba(var(--primary-rgb), 0.05);
-    }
-    svg {
-        color: var(--primary-color);
-    }
-    span {
-        font-size: 0.875rem;
-        font-weight: 500;
-        color: var(--header-color);
-        text-align: center;
-    }
-    .checkIcon {
-        position: absolute;
-        top: 8px;
-        right: 8px;
-        color: var(--primary-color);
-    }
-}
-// Column Selection
-.columnSelection {
-    .noColumns {
-        text-align: center;
-        padding: 48px 24px;
-        color: var(--paragraph-color);
-        svg {
-            color: var(--paragraph-color);
-            margin-bottom: 16px;
-        }
-        h3 {
-            margin: 0 0 8px 0;
-            color: var(--header-color);
-        }
-        p {
-            margin: 0;
-            max-width: 400px;
-            margin: 0 auto;
-        }
-    }
-    .columnSelectionHeader {
-        margin-bottom: 24px;
-        p {
-            margin: 0 0 12px 0;
-            font-size: 1rem;
-            color: var(--paragraph-color);
-        }
-    }
-    .quickActions {
-        display: flex;
-        gap: 16px;
-    }
-    .linkButton {
-        background: none;
-        border: none;
-        color: var(--primary-color);
-        font-size: 0.875rem;
-        font-weight: 500;
-        cursor: pointer;
-        transition: all 0.2s ease;
-        &:hover {
-            color: var(--primary-color);
-            text-decoration: underline;
-        }
-    }
-}
-.columnCategories {
-    display: grid;
-    gap: 16px; // Reduced from 24px for more compact layout
-}
-.columnCategory {
-    background-color: var(--bg-color);
-    border-radius: var(--radius);
-    padding: 16px; // Reduced from 20px
-    border: 1px solid var(--border-color);
-    .categoryHeader {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        margin-bottom: 16px;
-        svg {
-            color: var(--primary-color);
-        }
-        h4 {
-            margin: 0;
-            font-size: 1rem;
-            font-weight: 600;
-            color: var(--header-color);
-        }
-        span {
-            font-size: 0.875rem;
-            color: var(--paragraph-color);
-        }
-    }
-}
-.columnList {
-    display: grid;
-    grid-template-columns: repeat(
-        auto-fill,
-        minmax(180px, 1fr)
-    ); // Reduced from 200px
-    gap: 6px; // Reduced from 8px
-}
-.columnItem {
-    display: flex;
-    align-items: center;
-    gap: 6px; // Reduced from 8px
-    padding: 6px 10px; // Reduced from 8px 12px
-    background-color: var(--tertiary-color);
-    border-radius: var(--radius);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    &:hover {
-        background-color: rgba(var(--primary-rgb), 0.05);
-    }
-    input[type='checkbox'] {
-        width: 16px;
-        height: 16px;
-        cursor: pointer;
-        accent-color: var(--primary-color);
-    }
-    .columnName {
-        flex: 1;
-        font-size: 0.875rem;
-        font-weight: 500;
-        color: var(--header-color);
-    }
-    .columnType {
-        font-size: 0.75rem;
-        color: var(--paragraph-color);
-        padding: 2px 8px;
-        background-color: var(--bg-color);
-        border-radius: var(--radius);
-    }
-}
-.selectedSummary {
-    margin-top: 24px;
-    padding: 16px;
-    background-color: rgba(var(--primary-rgb), 0.05);
-    border: 1px solid rgba(var(--primary-rgb), 0.2);
-    border-radius: var(--radius);
-    text-align: center;
-    font-size: 0.875rem;
-    color: var(--primary-color);
-}
-.tableColumnSections {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-}
-.tableSection {
-    background-color: var(--tertiary-color);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius);
-    padding: 16px;
-    .tableSectionHeader {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 16px;
-        padding-bottom: 12px;
-        border-bottom: 1px solid var(--border-color);
-        h3 {
-            margin: 0;
-            font-size: 1.125rem;
-            font-weight: 600;
-            color: var(--header-color);
-        }
-        .tableColumnCount {
-            font-size: 0.875rem;
-            color: var(--paragraph-color);
-            background-color: var(--bg-color);
-            padding: 4px 8px;
-            border-radius: var(--radius);
-        }
-    }
-}
-// Help boxes
-.helpBox {
-    display: flex;
-    gap: 16px;
-    padding: 16px;
-    background-color: rgba(var(--primary-color), 0.05);
-    border: 1px solid rgba(var(--primary-color), 0.2);
-    border-radius: var(--radius);
-    margin-bottom: 24px;
-    svg {
-        color: var(--primary-color);
-        flex-shrink: 0;
-    }
-    h4 {
-        margin: 0 0 8px 0;
-        font-size: 1rem;
-        font-weight: 600;
-        color: var(--header-color);
-    }
-    p {
-        margin: 0;
-        font-size: 0.875rem;
-        color: var(--paragraph-color);
-        line-height: 1.5;
-    }
-}
-// Skip options
-.skipOption {
-    text-align: center;
-    margin-top: 32px;
-    padding-top: 32px;
-    border-top: 1px solid var(--border-color);
-    p {
-        margin: 0 0 16px 0;
-        font-size: 0.875rem;
-        color: var(--paragraph-color);
-    }
-}
-// Advanced Filters section (from original GenericReport)
-.filtersSection {
-    // Filter operator container
-    .filterOperatorContainer {
-        margin-bottom: 24px;
-        padding: 20px;
-        background-color: var(--tertiary-color);
-        border: 1px solid var(--border-color);
-        border-radius: var(--radius);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        gap: 20px;
-    }
-    .mainFilterOperator {
-        flex: 1;
-        label {
-            display: block;
-            margin-bottom: 12px;
-            font-size: 1rem;
-            font-weight: 600;
-            color: var(--header-color);
-        }
-    }
-    .operatorOptions {
-        display: flex;
-        gap: 16px;
-    }
-    .operatorOption {
-        padding: 16px 20px;
-        border: 2px solid var(--border-color);
-        border-radius: var(--radius);
-        cursor: pointer;
-        transition: all 0.2s ease;
-        background-color: var(--tertiary-color);
-        text-align: center;
-        flex: 1;
-        &:hover {
-            border-color: var(--primary-color);
-            background-color: rgba(var(--primary-rgb), 0.05);
-        }
-        &.operatorOptionSelected {
-            border-color: var(--primary-color);
-            background-color: rgba(var(--primary-rgb), 0.1);
-            .operatorName {
-                color: var(--primary-color);
-            }
-        }
-    }
-    .operatorName {
-        font-size: 1rem;
-        font-weight: 600;
-        color: var(--header-color);
-        margin-bottom: 4px;
-    }
-    .operatorDescription {
-        font-size: 0.875rem;
-        color: var(--paragraph-color);
-        line-height: 1.3;
-    }
-    .filterActionButtons {
-        display: flex;
-        gap: 12px;
-    }
-    // Filter groups
-    .filterGroup {
-        margin-bottom: 24px;
-        background-color: var(--tertiary-color);
-        border: 1px solid var(--border-color);
-        border-radius: var(--radius);
-        overflow: hidden;
-    }
-    .filterGroupHeader {
-        background-color: var(--bg-color);
-        padding: 16px 20px;
-        border-bottom: 1px solid var(--border-color);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        gap: 20px;
-    }
-    .filterGroupTitle {
-        display: flex;
-        align-items: center;
-        gap: 24px;
-        flex: 1;
-        h4 {
-            margin: 0;
-            font-size: 1.125rem;
-            font-weight: 600;
-            color: var(--header-color);
-        }
-    }
-    .filterGroupOperator {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        label {
-            font-size: 0.875rem;
-            font-weight: 500;
-            color: var(--paragraph-color);
-        }
-    }
-    .operatorButtonGroup {
-        display: flex;
-        border-radius: var(--radius);
-        overflow: hidden;
-        border: 1px solid var(--border-color);
-    }
-    .operatorButton {
-        padding: 8px 16px;
-        background-color: var(--tertiary-color);
-        border: none;
-        font-size: 0.875rem;
-        font-weight: 500;
-        color: var(--paragraph-color);
-        cursor: pointer;
-        transition: all 0.2s ease;
-        border-right: 1px solid var(--border-color);
-        &:last-child {
-            border-right: none;
-        }
-        &:hover {
-            background-color: rgba(var(--primary-rgb), 0.05);
-            color: var(--primary-color);
-        }
-        &.operatorButtonSelected {
-            background-color: var(--primary-color);
-            color: var(--tertiary-color);
-        }
-    }
-    .filterGroupActions {
-        display: flex;
-        gap: 12px;
-        align-items: center;
-    }
-    // Filter criteria
-    .filterCriteriaContainer {
-        padding: 20px;
-    }
-    .filterCriterion {
-        background-color: var(--bg-color);
-        border: 1px solid var(--border-color);
-        border-radius: var(--radius);
-        margin-bottom: 16px;
-        overflow: hidden;
-        &:last-child {
-            margin-bottom: 0;
-        }
-    }
-    .filterCriterionHeader {
-        padding: 12px 16px;
-        background-color: var(--tertiary-color);
-        border-bottom: 1px solid var(--border-color);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        h4 {
-            margin: 0;
-            font-size: 0.875rem;
-            font-weight: 500;
-            color: var(--header-color);
-        }
-    }
-    .filterCriterionFields {
-        padding: 16px;
-        display: grid;
-        grid-template-columns: 2fr 1fr 2fr;
-        gap: 16px;
-        align-items: end;
-        @media (max-width: 768px) {
-            grid-template-columns: 1fr;
-            gap: 12px;
-        }
-    }
-    .filterField {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-        label {
-            font-size: 0.75rem;
-            font-weight: 500;
-            color: var(--paragraph-color);
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-    }
-    .filterSelect {
-        padding: 8px 12px;
-        border: 1px solid var(--border-color);
-        border-radius: var(--radius);
-        background-color: var(--tertiary-color);
-        font-size: 0.875rem;
-        color: var(--header-color);
-        cursor: pointer;
-        &:focus {
-            outline: none;
-            border-color: var(--primary-color);
-            box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
-        }
-    }
-    .filterInput {
-        padding: 8px 12px;
-        border: 1px solid var(--border-color);
-        border-radius: var(--radius);
-        font-size: 0.875rem;
-        color: var(--header-color);
-        &:focus {
-            outline: none;
-            border-color: var(--primary-color);
-            box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
-        }
-        &::placeholder {
-            color: var(--paragraph-color);
-        }
-    }
-    .removeJoinBtn {
-        background: none;
-        border: none;
-        color: var(--approval-color);
-        font-size: 1.25rem;
-        cursor: pointer;
-        padding: 4px 8px;
-        border-radius: var(--radius);
-        transition: all 0.2s ease;
-        flex-shrink: 0;
-        &:hover {
-            background-color: rgba(var(--approval-color), 0.1);
-        }
-    }
-    .emptyFilterGroup {
-        padding: 40px 20px;
-        text-align: center;
-        color: var(--paragraph-color);
-        background-color: var(--bg-color) er;
-        p {
-            margin: 0;
-            font-style: italic;
-        }
-    }
-}
-// Streamlined Report Section (for sorting and filtering)
-.reportSection {
-    margin-bottom: 24px;
-}
-.sectionHeader {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 16px 20px;
-    background-color: rgba(var(--primary-color), 0.05);
-    border: 1px solid rgba(var(--primary-color), 0.2);
-    border-radius: var(--radius);
-    margin-bottom: 16px;
-    transition: all 0.2s ease;
-    &:hover {
-        background-color: rgba(var(--primary-color), 0.08);
-        cursor: pointer;
-    }
-    h3 {
-        margin: 0;
-        font-size: 1.125rem;
-        font-weight: 600;
-        color: var(--header-color);
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        cursor: pointer;
-    }
-}
-.sectionHeaderActions {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-.streamlinedToggle {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 0.875rem;
-    color: var(--paragraph-color);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    &:hover {
-        color: var(--primary-color);
-    }
-    svg {
-        transition: transform 0.2s ease;
-    }
-    &.expanded svg {
-        transform: rotate(180deg);
-    }
-}
-// Streamlined sorting styles
-.sortingContainer {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
-.sortingItem {
-    background-color: var(--tertiary-color);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius);
-    padding: 16px 20px;
-    transition: all 0.2s ease;
-    &:hover {
-        border-color: var(--primary-color);
-        box-shadow: var(--box-shadow-small);
-    }
-}
-.sortingHeader {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 12px;
-    h4 {
-        margin: 0;
-        font-size: 0.875rem;
-        font-weight: 600;
-        color: var(--header-color);
-    }
-}
-.sortingControls {
-    display: grid;
-    grid-template-columns: 2fr 1fr 1fr auto;
-    gap: 16px;
-    align-items: end;
-    @media (max-width: 768px) {
-        grid-template-columns: 1fr;
-        gap: 12px;
-    }
-}
-.sortingField {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    label {
-        font-size: 0.75rem;
-        font-weight: 500;
-        color: var(--paragraph-color);
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-    }
-}
-.sortingSelect {
-    padding: 8px 12px;
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius);
-    background-color: var(--bg-color);
-    font-size: 0.875rem;
-    color: var(--header-color);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    &:focus {
-        outline: none;
-        border-color: var(--primary-color);
-        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
-    }
-    &:hover {
-        border-color: var(--primary-color);
-    }
-}
-.removeSortBtn {
-    background: none;
-    border: none;
-    color: var(--approval-color);
-    font-size: 1.25rem;
-    cursor: pointer;
-    padding: 8px;
-    border-radius: var(--radius);
-    transition: all 0.2s ease;
-    width: 36px;
-    height: 36px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    &:hover {
-        background-color: rgba(var(--approval-color), 0.1);
-        transform: scale(1.1);
-    }
-}
-.joinGrid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: var(--padding);
-    padding: var(--padding);
-    @media (max-width: 768px) {
-        grid-template-columns: 1fr;
-    }
-}
-.joinGridColumn {
-    display: flex;
-    flex-direction: column;
-}
-.joinField {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    label {
-        font-size: 0.75rem;
-        font-weight: 600;
-        color: var(--paragraph-color);
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-    }
-}
-.selectControl {
-    padding: 8px 12px;
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius);
-    background-color: var(--tertiary-color);
-    font-size: 0.875rem;
-    color: var(--header-color);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    &:focus {
-        outline: none;
-        border-color: var(--primary-color);
-        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
-    }
-    &:hover {
-        border-color: var(--primary-color);
-    }
-    optgroup {
-        font-weight: 600;
-        color: var(--header-color);
-    }
-    option {
-        padding: 4px 8px;
-        color: var(--paragraph-color);
-    }
-}
-.removeJoinBtn {
-    background: none;
-    border: none;
-    color: var(--approval-color);
-    font-size: 1.25rem;
-    cursor: pointer;
-    padding: 4px 8px;
-    border-radius: var(--radius);
-    transition: all 0.2s ease;
-    flex-shrink: 0;
-    &:hover {
-        background-color: rgba(var(--color-invalid), 0.1);
-        transform: scale(1.1);
-    }
-}
-// Preview section
-.previewSection {
-    .previewActions {
-        margin-bottom: 24px;
-        text-align: center;
-    }
-    .resultSummary {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
-        padding: var(--padding);
-        background-color: rgba(var(--color-valid), 0.1);
-        border-radius: var(--radius);
-        margin-bottom: calc(var(--padding) * 1.5);
-        font-size: 1rem;
-        font-weight: 500;
-        color: rgba(var(--color-valid), 1);
-        svg {
-            color: rgba(var(--color-valid), 1);
-        }
-    }
-    .gridContainer {
-        margin-bottom: calc(var(--padding) * 2);
-        border: 1px solid var(--border-color);
-        border-radius: var(--radius);
-        overflow: hidden;
-    }
-    .exportOptions {
-        text-align: center;
-        h3 {
-            margin: 0 0 var(--padding) 0;
-            font-size: 1.125rem;
-            font-weight: 600;
-            color: var(--header-color);
-        }
-    }
-    .exportButtons {
-        display: flex;
-        justify-content: center;
-        gap: 12px;
-    }
-}
-// Loading state
-.loading {
-    text-align: center;
-    padding: calc(var(--padding) * 2.5);
-    font-size: 1rem;
-    color: var(--paragraph-color);
-}
-// Buttons
-.btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    padding: 12px calc(var(--padding) * 1.5);
-    border: none;
-    border-radius: var(--radius);
-    font-size: 0.875rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    text-decoration: none;
-    min-height: 44px;
-    position: relative;
-    overflow: hidden;
-    &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-        transform: none !important;
-    }
-    &:focus {
-        outline: 2px solid rgba(var(--primary-rgb), 0.3);
-        outline-offset: 2px;
-    }
-    &:active:not(:disabled) {
-        transform: translateY(1px);
-    }
-    svg {
-        width: 16px;
-        height: 16px;
-        flex-shrink: 0;
-    }
-}
-.btnPrimary {
-    background-color: var(--primary-color);
-    color: var(--tertiary-color);
-    box-shadow: 0 2px 4px rgba(var(--primary-rgb), 0.2);
-    &:hover:not(:disabled) {
-        background-color: var(--primary-color);
-        box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
-        transform: translateY(-1px);
-        filter: brightness(0.9);
-    }
-    &:focus {
-        outline-color: rgba(var(--primary-rgb), 0.5);
-    }
-}
-.btnSecondary {
-    background-color: var(--secondary-color);
-    color: var(--tertiary-color);
-    box-shadow: 0 2px 4px rgba(var(--secondary-rgb), 0.2);
-    &:hover:not(:disabled) {
-        background-color: var(--secondary-color);
-        box-shadow: 0 4px 12px rgba(var(--secondary-rgb), 0.3);
-        transform: translateY(-1px);
-        filter: brightness(0.9);
-    }
-    &:focus {
-        outline-color: rgba(var(--secondary-rgb), 0.5);
-    }
-}
-.btnCancel {
-    background-color: #dc2626;
-    color: var(--tertiary-color);
-    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
-    &:hover:not(:disabled) {
-        background-color: #b91c1c;
-        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
-        transform: translateY(-1px);
-    }
-    &:focus {
-        outline-color: rgba(220, 38, 38, 0.5);
-    }
-}
-.btnPrevious {
-    background-color: #6b7280;
-    color: var(--tertiary-color);
-    box-shadow: 0 2px 4px rgba(107, 114, 128, 0.2);
-    &:hover:not(:disabled) {
-        background-color: #4b5563;
-        box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
-        transform: translateY(-1px);
-    }
-    &:focus {
-        outline-color: rgba(107, 114, 128, 0.5);
-    }
-}
-.btnStartAgain {
-    background-color: #ea580c;
-    color: var(--tertiary-color);
-    box-shadow: 0 2px 4px rgba(234, 88, 12, 0.2);
-    &:hover:not(:disabled) {
-        background-color: #c2410c;
-        box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3);
-        transform: translateY(-1px);
-    }
-    &:focus {
-        outline-color: rgba(234, 88, 12, 0.5);
-    }
-}
-.btnExportExcel {
-    background-color: #059669;
-    color: var(--tertiary-color);
-    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
-    &:hover:not(:disabled) {
-        background-color: #047857;
-        box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
-        transform: translateY(-1px);
-    }
-    &:focus {
-        outline-color: rgba(5, 150, 105, 0.5);
-    }
-}
-.btnExportCsv {
-    background-color: #2563eb;
-    color: var(--tertiary-color);
-    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
-    &:hover:not(:disabled) {
-        background-color: #1d4ed8;
-        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
-        transform: translateY(-1px);
-    }
-    &:focus {
-        outline-color: rgba(37, 99, 235, 0.5);
-    }
-}
-.btnExportPdf {
-    background-color: #dc2626;
-    color: var(--tertiary-color);
-    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
-    &:hover:not(:disabled) {
-        background-color: #b91c1c;
-        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
-        transform: translateY(-1px);
-    }
-    &:focus {
-        outline-color: rgba(220, 38, 38, 0.5);
-    }
-}
-.btnSuccess {
-    background-color: rgba(var(--color-valid), 1);
-    color: var(--tertiary-color);
-    &:hover:not(:disabled) {
-        background-color: rgba(var(--color-valid), 1);
-        box-shadow: var(--box-shadow-small);
-        filter: brightness(0.9);
-    }
-}
-// Advanced mode placeholder
-.advancedMode {
-    background-color: var(--tertiary-color);
-    border-radius: var(--radius);
-    padding: 40px;
-    text-align: center;
-    box-shadow: var(--box-shadow-small);
-    p {
-        font-size: 1rem;
-        color: var(--paragraph-color);
-    }
-}
-// Relationships section
-.relationshipsSection {
-    .currentJoins {
-        margin-bottom: 24px;
-        h3 {
-            margin: 0 0 16px 0;
-            font-size: 1.125rem;
-            font-weight: 600;
-            color: var(--header-color);
-        }
-    }
-    .joinItem {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 12px 16px;
-        background-color: rgba(var(--color-valid), 0.05);
-        border: 1px solid rgba(var(--color-valid), 0.2);
-        border-radius: var(--radius);
-        margin-bottom: 8px;
-        .joinInfo {
-            flex: 1;
-            .joinDescription {
-                display: block;
-                font-weight: 500;
-                color: var(--header-color);
-                margin-bottom: 4px;
-            }
-            .joinDetails {
-                display: block;
-                font-size: 0.875rem;
-                color: var(--paragraph-color);
-            }
-        }
-        .removeJoinBtn {
-            background: none;
-            border: none;
-            color: var(--approval-color);
-            font-size: 1.25rem;
-            cursor: pointer;
-            padding: 4px 8px;
-            border-radius: var(--radius);
-            transition: all 0.2s ease;
-            &:hover {
-                background-color: rgba(var(--approval-color), 0.1);
-            }
-        }
-    }
-    .detectedJoins {
-        margin-bottom: 24px;
-        h3 {
-            margin: 0 0 8px 0;
-            font-size: 1.125rem;
-            font-weight: 600;
-            color: var(--header-color);
-        }
-        p {
-            margin: 0 0 16px 0;
-            color: var(--paragraph-color);
-        }
-    }
-    .detectionsGrid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-        gap: 12px;
-        @media (max-width: 768px) {
-            grid-template-columns: 1fr;
-        }
-    }
-    .detectionCard {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 12px;
-        background-color: var(--tertiary-color);
-        border: 2px solid var(--border-color);
-        border-radius: var(--radius);
-        margin-bottom: 0;
-        transition: all 0.2s ease;
-        &:hover {
-            border-color: var(--primary-color);
-            box-shadow: var(--box-shadow-small);
-        }
-        .detectionInfo {
-            flex: 1;
-            .detectionTitle {
-                display: flex;
-                align-items: center;
-                gap: 8px;
-                margin-bottom: 8px;
-                span {
-                    font-weight: 500;
-                    color: var(--header-color);
-                }
-                .confidenceRating {
-                    margin-left: auto;
-                    font-size: 0.875rem;
-                }
-                svg {
-                    color: var(--primary-color);
-                }
-            }
-            .detectionDescription {
-                margin: 0;
-                font-size: 0.875rem;
-                color: var(--paragraph-color);
-            }
-        }
-        .connectIconBtn {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 40px;
-            height: 40px;
-            border: 2px solid var(--primary-color);
-            border-radius: 50%;
-            background-color: transparent;
-            color: var(--primary-color);
-            cursor: pointer;
-            transition: all 0.2s ease;
-            flex-shrink: 0;
-            &:hover:not(:disabled) {
-                background-color: var(--primary-color);
-                color: var(--tertiary-color);
-                transform: scale(1.05);
-            }
-            &:disabled {
-                opacity: 0.5;
-                cursor: not-allowed;
-                transform: none !important;
-            }
-            &.connected {
-                background-color: rgba(var(--color-valid), 1);
-                border-color: rgba(var(--color-valid), 1);
-                color: var(--tertiary-color);
-                &:hover {
-                    background-color: rgba(var(--color-valid), 0.8);
-                    border-color: rgba(var(--color-valid), 0.8);
-                    transform: none;
-                }
-            }
-            svg {
-                flex-shrink: 0;
-            }
-        }
-    }
-    .currentFilters {
-        margin-bottom: 24px;
-        h3 {
-            margin: 0 0 16px 0;
-            font-size: 1.125rem;
-            font-weight: 600;
-            color: var(--header-color);
-        }
-    }
-    // Manual join section styling
-    .manualJoinSection {
-        margin-bottom: 24px;
-        padding: 20px;
-        background-color: var(--bg-color) er;
-        border-radius: var(--radius);
-        border: 1px solid var(--border-color);
-        h3 {
-            margin: 0 0 8px 0;
-            font-size: 1.125rem;
-            font-weight: 600;
-            color: var(--header-color);
-        }
-        p {
-            margin: 0 0 16px 0;
-            color: var(--paragraph-color);
-            font-size: 0.875rem;
-        }
-    }
-    .advancedWarning {
-        display: flex;
-        align-items: flex-start;
-        gap: 8px;
-        padding: 12px;
-        background-color: rgba(251, 146, 60, 0.1);
-        border: 1px solid rgba(251, 146, 60, 0.3);
-        border-radius: var(--radius);
-        margin-bottom: 16px;
-        svg {
-            color: #f59e0b;
-            flex-shrink: 0;
-            margin-top: 2px;
-        }
-        span {
-            font-size: 0.875rem;
-            color: var(--header-color);
-            line-height: 1.4;
-            strong {
-                color: #f59e0b;
-            }
-        }
-    }
-    .manualJoinForm {
-        background-color: var(--tertiary-color);
-        padding: 20px;
-        border-radius: var(--radius);
-        border: 1px solid var(--border-color);
-        margin-top: 16px;
-    }
-    .manualJoinGrid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-        gap: 16px;
-        margin-bottom: 20px;
-    }
-    .manualJoinField {
-        display: flex;
-        flex-direction: column;
-        gap: 6px;
-        label {
-            font-size: 0.875rem;
-            font-weight: 500;
-            color: var(--paragraph-color);
-        }
-        select {
-            padding: 8px 12px;
-            border: 1px solid var(--border-color);
-            border-radius: var(--radius);
-            background-color: var(--tertiary-color);
-            font-size: 0.875rem;
-            color: var(--header-color);
-            &:focus {
-                outline: none;
-                border-color: var(--primary-color);
-                box-shadow: 0 0 0 2px rgba(var(--primary-color), 0.1);
-            }
-            &:disabled {
-                background-color: var(--bg-color);
-                color: var(--paragraph-color);
-                cursor: not-allowed;
-            }
-        }
-    }
-    .manualJoinActions {
-        display: flex;
-        gap: 12px;
-        justify-content: flex-end;
-        padding-top: 16px;
-        border-top: 1px solid var(--border-color);
-    }
-    .filterItem {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 12px 16px;
-        background-color: rgba(var(--primary-rgb), 0.05);
-        border: 1px solid rgba(var(--primary-rgb), 0.2);
-        border-radius: var(--radius);
-        margin-bottom: 8px;
-        .filterInfo {
-            flex: 1;
-            .filterDescription {
-                font-weight: 500;
-                color: var(--header-color);
-            }
-        }
-        .removeFilterBtn {
-            background: none;
-            border: none;
-            color: var(--approval-color);
-            font-size: 1.25rem;
-            cursor: pointer;
-            padding: 4px 8px;
-            border-radius: var(--radius);
-            transition: all 0.2s ease;
-            &:hover {
-                background-color: rgba(var(--approval-color), 0.1);
-            }
-        }
-    }
-    .reportActions {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 24px;
-        margin-top: 32px;
-        .saveSection,
-        .exportOptions {
-            background-color: var(--bg-color);
-            border-radius: var(--radius);
-            padding: 20px;
-            border: 1px solid var(--border-color);
-            h3 {
-                margin: 0 0 8px 0;
-                font-size: 1.125rem;
-                font-weight: 600;
-                color: var(--header-color);
-            }
-            p {
-                margin: 0 0 16px 0;
-                font-size: 0.875rem;
-                color: var(--paragraph-color);
-            }
-        }
-        .saveButtons {
-            display: flex;
-            gap: 12px;
-            flex-wrap: wrap;
-        }
-    }
-}
-// Smart Suggestions Styling
-.smartSuggestionsContainer {
-    background-color: var(--bg-color);
-    border-radius: var(--radius);
-    padding: 20px;
-    border: 1px solid var(--border-color);
-    margin-bottom: 16px;
-}
-.suggestionsIntro {
-    margin: 0 0 16px 0;
-    font-size: 0.875rem;
-    color: var(--paragraph-color);
-    line-height: 1.4;
-}
-.suggestionsCount {
-    font-size: 0.75rem;
-    color: var(--paragraph-color);
-    background-color: var(--bg-color);
-    padding: 4px 8px;
-    border-radius: var(--radius);
-    border: 1px solid var(--border-color);
-}
-.suggestionsGrid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 16px;
-    @media (max-width: 768px) {
-        grid-template-columns: 1fr;
-    }
-}
-.suggestionCard {
-    background-color: var(--tertiary-color);
-    border: 2px solid var(--border-color);
-    border-radius: var(--radius);
-    padding: 16px;
-    transition: all 0.2s ease;
-    &:hover {
-        border-color: var(--primary-color);
-        box-shadow: var(--box-shadow-small);
-        transform: translateY(-1px);
-    }
-}
-.suggestionHeader {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 8px;
-}
-.suggestionTitle {
-    font-size: 0.875rem;
-    font-weight: 600;
-    color: var(--header-color);
-}
-.suggestionType {
-    font-size: 0.75rem;
-    padding: 2px 8px;
-    border-radius: var(--radius);
-    background-color: var(--primary-color);
-    color: var(--tertiary-color);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    font-weight: 500;
-}
-.suggestionDescription {
-    margin: 0 0 12px 0;
-    font-size: 0.8rem;
-    color: var(--paragraph-color);
-    line-height: 1.3;
-}
-.suggestionActions {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    .btn {
-        padding: 6px 12px;
-        font-size: 0.75rem;
-        min-height: 32px;
-        flex-shrink: 0;
-        &:disabled {
-            background-color: rgba(var(--color-valid), 1);
-            color: var(--tertiary-color);
-            cursor: default;
-            transform: none !important;
-        }
-    }
-}
-.suggestionReasoning {
-    font-size: 0.7rem;
-    color: var(--paragraph-color);
-    font-style: italic;
-    flex: 1;
-    text-align: right;
-}
-// SweetAlert button sizing fix
-:global(.swal-button-fixed-width) {
-    min-width: 120px !important;
-    white-space: nowrap !important;
-}
-// Responsive design
-@media (max-width: 768px) {
-    .header {
-        flex-direction: column;
-        gap: 16px;
-        align-items: stretch;
-    }
-    .headerLeft,
-    .headerRight {
-        justify-content: center;
-    }
-    .wizardProgress {
-        overflow-x: auto;
-        padding-bottom: 20px;
-        &::before {
-            display: none;
-        }
-    }
-    .wizardStep {
-        min-width: 120px;
-        .stepDescription {
-            display: none;
-        }
-    }
-    .tableGrid,
-    .columnList {
-        grid-template-columns: 1fr;
-    }
-    .exportButtons {
-        flex-direction: column;
-        align-items: center;
-    }
-}
-// Human-friendly JSON styling (from original GenericReport)
-.humanJsonContainer {
-    display: flex;
-    flex-direction: column;
-    gap: 3px;
-    padding: 10px 12px;
-    background-color: var(--bg-color);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-    font-size: 0.9rem;
-    margin: 2px 0;
-}
-.humanJsonRow {
-    display: flex;
-    align-items: center;
-    padding: 5px 2px;
-    line-height: 1.4;
-    border-radius: 4px;
-    transition: background-color 0.15s ease;
-    min-height: 28px;
-    word-break: break-word;
-    overflow-wrap: break-word;
-    &:hover {
-        background-color: rgba(0, 0, 0, 0.03);
-    }
-}
-.humanJsonKey {
-    font-weight: 600;
-    color: var(--primary-color);
-    margin-right: 12px;
-    min-width: 120px;
-    flex: 0 0 auto;
-    padding-left: 3px;
-}
-.humanJsonValue {
-    flex: 1;
-    word-break: break-word;
-    padding-right: 5px;
-    color: var(--header-color);
-    font-weight: 500;
-}
-// Pagination info styling
-.paginationInfo {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 12px 16px;
-    background-color: var(--bg-color);
-    border-top: 1px solid var(--border-color);
-    font-size: 0.875rem;
-    color: var(--paragraph-color);
-    font-weight: 500;
-}
-// Grid container enhancements for JSON content
-.gridContainer {
-    // Ensure the grid can handle dynamic row heights
-    :global(.InovuaReactDataGrid) {
-        // Allow rows to expand for JSON content
-        .InovuaReactDataGrid__row {
-            min-height: 40px;
-            // Allow rows to expand to fit content
-            height: auto !important;
-            // JSON cell styling
-            .InovuaReactDataGrid__cell {
-                // Ensure proper vertical alignment for JSON content
-                display: flex;
-                align-items: flex-start;
-                padding: 8px 12px;
-                // Handle text overflow for JSON content
-                overflow: visible;
-                // Allow cells to expand vertically
-                height: auto !important;
-                // JSON content wrapper
-                > div {
-                    width: 100%;
-                    // Remove height restrictions for JSON content
-                    height: auto;
-                    // JSON container should expand fully
-                    .humanJsonContainer {
-                        // Remove any height restrictions
-                        max-height: none;
-                        overflow: visible;
-                    }
-                }
-            }
-        }
-        // Ensure header alignment
-        .InovuaReactDataGrid__header {
-            .InovuaReactDataGrid__header-cell {
-                display: flex;
-                align-items: center;
-                padding: 8px 12px;
-            }
-        }
-    }
-}