.card .bg-light {
    border: 1px solid #dee2e6 !important;
    --bs-card-border-color: white;
    --bs-card-border-radius: 0px;
}

.card-header.bg-light {
    border: 1px solid #dee2e6 !important;
}

.card-square {
    border-radius: 0;
}

    .card-square .card-header {
        background-color: #f8f9fa!important;
        border-radius: 0;
        border-bottom: 1px solid #dee2e6;
      /*  padding: 0.5rem 0.75rem;*/
    }

        .card-square .card-header h5 {
            margin-bottom: 0rem;
        }

    .card-square .card-body {
        border-radius: 0;
        padding: 0;
        border: 0px;
    }

/* Fix for Bootstrap grid inside Syncfusion tabs - ProfileInfo specific */
.e-tab .profileinfo-component {
    width: 100%;
    display: block;
    isolation: isolate; /* Create new stacking context */
}

/* ProfileInfo component specific Bootstrap grid fixes */
.profileinfo-component .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
    width: 100%;
}

.profileinfo-component [class*="col-"] {
    position: relative;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
}

@media (min-width: 768px) {
    .profileinfo-component .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .profileinfo-component .col-md-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
}

@media (min-width: 992px) {
    .profileinfo-component .col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .profileinfo-component .col-lg-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
}

/* SummaryData component specific isolation */
.e-tab .summarydata-component {
    width: 100%;
    display: block;
    isolation: isolate; /* Create new stacking context */
}

/* StagingData component specific isolation */
.e-tab .staging-grid-wrapper {
    width: 100%;
    display: block;
    isolation: isolate; /* Create new stacking context */
}

/* General tab content width fix */
.e-tab .e-content .e-item {
    width: 100% !important;
    display: block !important;
    position: relative; /* Ensure proper containment */
}

.e-tab .e-content {
    width: 100% !important;
}

/* Additional tab isolation to prevent bleed-through */
.e-tab .e-content .e-item.e-active {
    z-index: 1;
}

.e-tab .e-content .e-item:not(.e-active) {
    display: none !important; /* Hide inactive tabs completely */
}