/* GrapesJS Content Isolation CSS */
.grapesjs-content {
    /* Ensure content is isolated from page styles */
    isolation: isolate;
    contain: layout style paint;
}

.grapesjs-content * {
    /* Reset any inherited styles that might conflict */
    box-sizing: border-box;
}

/* Fix SVG sizing issues */
.grapesjs-content svg {
    /* Ensure SVG elements maintain their intended size */
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    /* Reset any inherited sizing */
    flex-shrink: 0;
    flex-grow: 0;
}

/* Specific SVG size classes that should work properly */
.grapesjs-content .w-4 svg,
.grapesjs-content .h-4 svg {
    width: 1rem !important;
    height: 1rem !important;
}

.grapesjs-content .w-5 svg,
.grapesjs-content .h-5 svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
}

.grapesjs-content .w-6 svg,
.grapesjs-content .h-6 svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

/* Ensure inline SVG elements don't get oversized */
.grapesjs-content svg[width],
.grapesjs-content svg[height] {
    width: attr(width) !important;
    height: attr(height) !important;
}

/* Fix any SVG that might be inheriting wrong sizes */
.grapesjs-content svg:not([width]):not([height]) {
    width: 1em !important;
    height: 1em !important;
}

/* Ensure GrapesJS generated content doesn't affect page layout */
.grapesjs-content .gjs-frame {
    border: none;
    margin: 0;
    padding: 0;
}

/* Isolate any GrapesJS generated CSS */
.grapesjs-content .gjs-css {
    isolation: isolate;
}

/* Ensure responsive behavior */
.grapesjs-content .gjs-devices {
    position: relative;
}

/* Prevent any GrapesJS styles from leaking */
.grapesjs-content .gjs-style-manager {
    isolation: isolate;
}

/* Ensure blocks are properly contained */
.grapesjs-content .gjs-block {
    isolation: isolate;
}

/* Isolate trait manager */
.grapesjs-content .gjs-trait-manager {
    isolation: isolate;
}

/* Ensure layer manager is isolated */
.grapesjs-content .gjs-layer-manager {
    isolation: isolate;
}

/* Additional SVG fixes for common Tailwind classes */
.grapesjs-content .inline-flex svg {
    flex-shrink: 0;
}

.grapesjs-content .items-center svg {
    vertical-align: middle;
}

/* Fix for any SVG that might be getting Bootstrap sizing */
.grapesjs-content svg.bi,
.grapesjs-content svg.fas,
.grapesjs-content svg.far,
.grapesjs-content svg.fab {
    width: 1em !important;
    height: 1em !important;
}