/* RT Workspace Grid Layout Styles */

/* Grid container for workspace items - Grid-specific layout overrides */
.rt-workspace-area, 
.rt-workspace-items,
.rt-workspace-drop-zone {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 10px;
    min-height: 60px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Grid-specific item layout adjustments */
.rt-workspace-item {
    flex-shrink: 0;
    flex-grow: 0;
    margin: 0 !important; /* Remove any default margins */
    box-sizing: border-box;
}

/* Size-based grid layout - Controls items per row */
/* Small: 4 per row | Medium: 3 per row | Large: 2 per row */
/* Small - 4 per row */
/* .rt-workspace-item.rt-workspace-size-small,
.rt-workspace-item:not([class*="rt-workspace-size"]) {
    flex-basis: calc(25% - 6px);
    min-width: calc(25% - 6px);
    max-width: calc(25% - 6px);
    box-sizing: border-box;
} */

/* Medium - 3 per row */
/* .rt-workspace-item.rt-workspace-size-medium {
    flex-basis: calc(33.33% - 6px);
    min-width: calc(33.33% - 6px);
    max-width: calc(33.33% - 6px);
    box-sizing: border-box;
} */

/* Large - 2 per row */
/* .rt-workspace-item.rt-workspace-size-large {
    flex-basis: calc(50% - 4px);
    min-width: calc(50% - 4px);
    max-width: calc(50% - 4px);
    box-sizing: border-box;
} */

/* Container items - Grid layout override: always take full width */
.rt-workspace-item[data-item-type="container"] {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
}

/* Break/divider - Grid layout override: Full-width horizontal dividers */
.rt-workspace-item[data-item-type="break"] {
    /* Full-width divider behavior in grid */
    flex-basis: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    
    /* Override grid item styling for breaks */
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
    margin: 8px 0 !important;
}

.rt-workspace-item[data-item-type="break"]:hover {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.rt-workspace-item[data-item-type="break"] .rt-workspace-break {
    pointer-events: auto;
}


/* Grid-specific responsive adjustments */
@media (max-width: 768px) {
    .rt-workspace-area, 
    .rt-workspace-items,
    .rt-workspace-drop-zone {
        gap: 6px;
        padding: 8px;
    }
}